filter：progid：DXImageTransform.Microsoft.gradient CSS屬性在IE中不起作用

我正在使用twitter的bootstrap css作爲我們的導航欄。當然在Chrome和Firefox中一切看起來都很棒，但在IE瀏覽器中卻很糟糕。我很難過，因爲他們對IE中的漸變具有適當的css過濾器命令，並且在做了一些研究之後，我發現偶爾IE會在顏色代碼中出現問題，而不是3位十六進制數，所以我改變了一切，仍然有同樣的問題。filter：progid：DXImageTransform.Microsoft.gradient CSS屬性在IE中不起作用

這裏是梯度的外觀在

鉻

enter image description here

和IE

enter image description here

這裏是CSS

.navbar-inner { 
    padding-left: 20px; 
    padding-right: 20px; 
    background-color: #36C; 
    background-image: -moz-linear-gradient(top,  #33C, #69C); 
    background-image: -ms-linear-gradient(top, #33C, #69C); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33C), to(#69C)); 
    background-image: -webkit-linear-gradient(top, #33C, #69C); 
    background-image: -o-linear-gradient(top,  #33C, #69C); 
    background-image: linear-gradient(top, #33C, #69C); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #33C', endColorstr='#69C', GradientType=0); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); 
} 
.btn-navbar { 
    display: none; 
    float: right; 
    padding: 7px 10px; 
    margin-left: 5px; 
    margin-right: 5px; 
    background-color: #36C; 
    background-image: -moz-linear-gradient(top, #33C, #66C); 
    background-image: -ms-linear-gradient(top, #33C, #66C); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33C), to(#66C)); 
    background-image: -webkit-linear-gradient(top, #33C, #66C); 
    background-image: -o-linear-gradient(top,  #33C, #66C); 
    background-image: linear-gradient(top, #33C, #66C); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #33C', endColorstr='#66C', GradientType=0); 
    border-color: #66C#66C#000000; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); 
}

來源

2013-04-23 NealR

我認爲梯度過濾器需要全色#AARRGGBB顏色代碼。只是#33C不會。改爲嘗試#003333CC。如果透明，請嘗試#7F3333CC - 我永遠不會記得它周圍的方式。

PS。試試IE10。但擺脫-ms-linear-gradient，因爲它直到linear-gradient，從來沒有存在過。

來源

2013-04-23 15:50:53

不幸的是，沒有改變在IE中的梯度（仍然是相同的顯示和屏幕截圖）。但是，它確實讓漸變在Chrome中消失了，所以它只是一種純色。 – NealR 2013-04-23 17:21:40

嗯......個人而言，我不認爲值得擔心 - 只需將濾鏡完全放下，併爲舊IE用戶使用純色。此外，您應該將您的'線性梯度'規則更改爲'線性梯度（底部，＃33C，＃69C）' – 2013-04-23 17:23:25

'過濾器'正在成爲一種實際屬性，只是實際上有意義的值而不是DXImageTransform廢話。所以這可能就是爲什麼你的漸變消失在那裏。 – 2013-04-23 17:24:22

filter：progid：DXImageTransform.Microsoft.gradient CSS屬性在IE中不起作用

回答

相關問題