0
我正在使用twitter的bootstrap
css作为我们的导航栏。当然在Chrome和Firefox中一切看起来都很棒,但在IE浏览器中却很糟糕。我很难过,因为他们对IE中的渐变具有适当的css过滤器命令,并且在做了一些研究之后,我发现偶尔IE会在颜色代码中出现问题,而不是3位十六进制数,所以我改变了一切,仍然有同样的问题。filter:progid:DXImageTransform.Microsoft.gradient CSS属性在IE中不起作用
这里是梯度的外观在
铬
和IE
这里是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);
}
不幸的是,没有改变在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