[問題] 在IE使用背景漸層效果造成的問題
程式碼補充:
html部分
<div class="gold">
<div class="rib_blue">
<div class="only">only</div>
<div class="only_dol">$15.73</div>
<span>/day</span>
</div>
<div class="mon"><strong>3</strong> months</div>
<div class="all_dol">Billed at $1415 TWD</div>
<div class="order_btns">ORDER</div>
</div>
兩個重點css的部分
.gold {
border: 2px solid orange;
width: 250px;
height: 130px;
background: -moz-linear-gradient(top, white, #FFDD8C);
background: -ms-linear-gradient(top, white, #FFDD8C);
background: -o-linear-gradient(top, white, #FFDD8C);
background: -webkit-gradient(linear, center top, center bottom, from(white),
to(#FFDD8C));
background: -webkit-linear-gradient(top, white, #FFDD8C);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',
endColorstr='#FFDD8C');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr =
'#FFFFFF', endColorstr = '#FFDD8C')";
background: linear-gradient(top, white, #FFDD8C);
position: relative;
float: left;
margin: 10px 5px;
text-align: left;
}
.rib_blue {
width: 83px;
height: 84px;
position: absolute;
top: -11px;
right: -10px;
color: white;
font-size: 12px;
padding-top: 10px;
padding-left: 18px;
}
想請問大家,
我在一個div(.gold)使用漸層背景,
發現包在div內用position去移動到超出div外的圖(.rib_blue)會被卡掉(只在IE發生),
變成像是div有加入overfloe:hidden;一樣的效果,
找一下才知道是下面這兩個css給IE漸層效果的影響,
想請問是否有解決的方法呢?
保有漸層效果,超出div範圍的圖又不會被卡掉...
感謝!
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',
endColorstr='#FFDD8C');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr =
'#FFFFFF', endColorstr = '#FFDD8C')";
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.163.12.174
→
05/11 12:41, , 1F
05/11 12:41, 1F
sorry, 已補充說明
※ 編輯: Leocancer 來自: 118.163.12.174 (05/11 12:47)
→
05/11 12:47, , 2F
05/11 12:47, 2F
可是的確在我拿掉這兩個候顯示就正常, 只是漸層背景就沒有了
※ 編輯: Leocancer 來自: 118.163.12.174 (05/11 12:49)
→
05/11 12:51, , 3F
05/11 12:51, 3F
推
05/11 13:13, , 4F
05/11 13:13, 4F