Question

我有以下css：

.tabStyle
        {
            background: -moz-linear-gradient(#EEEEEE, #E4E4E4) repeat scroll 0 0 transparent;
        }

这在Mozila火狐中效果很好但在IE和谷歌Chrome中不起作用。

我如何在IE和Chrome中实现它？

Answer 1

以下是支持它的每个浏览器的完整CSS：

background: -moz-linear-gradient(top, #eeeeee 0%, #e4e4e4 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%); /* IE10+ */
background: linear-gradient(top, #eeeeee 0%,#e4e4e4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */

Answer 2

只是为了评论，带有-moz前缀的样式只能在mozilla中使用。在chrome中，为了制作一些花哨的东西，有-webkit前缀样式。对于ie样式，您必须使用类似filter:progid...或progid:DXImageTransform.Microsoft.Alpha(sProperties)的内容。我强烈建议您不要使用上述技术，而是使用标准css实现您的目标。

例如，如果要创建渐变背景，可以使用1x40的尺寸保存渐变，即1px宽度和40像素渐变。然后按如下方式申请

.myGradientClass {
    background: url(../images/myGradient.png) repeat-x;
    height:40px;
    width:100%;
}

<div class="myGradientClass"></div>

与Mozilla和IE的css相关的问题

2 个答案: