IE9做他想要的？

Question

我有一个带有下拉菜单的网站，我正在使用chosen看看。

除IE9外，它在每个浏览器中都看起来相同（胡佛=灰色背景）。

使用BrowserStack

进行了测试

ASP.NET代码：

<select data-placeholder="Select some tags" class="chzn-select" multiple style="width: 350px;" tabindex="4">
 <option value=""></option>
 <option value="Online">Online</option>
 <option value="Offline">Offline</option>
 <option value="Registered">Registered</option>
 <option value="Unregistered">Unregistered</option>
</select>

CSS代码：

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
}

.chzn-container .chzn-results .highlighted em {
  background: transparent;
}

看起来IE9没有得到属性..

但为什么呢？ Visual Studio 2012告诉我IE与这些参数兼容。

我感谢所有提示，谢谢！

Answer 1

Ultimate CSS Gradient Generator帮助解决了我的问题。

我的代码现在看起来像这样：

.chzn-container .chzn-results .highlighted {
    background-color: #aaa;
    background: -moz-linear-gradient(top,  rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(153,153,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#999999',GradientType=0 ); /* IE6-8 */
    color: #fff; 
}

这完美无缺！

Answer 2

MS（IE＆lt; 10）特定样式应该是最后一个。

而不是：

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
}

订单应该是：

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
}

Answer 3

Internet Explorer 8和9具有符合CSS2.1标准的过滤字符串：

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#999', GradientType=0);";

---

修改

我一直在研究这个问题，看起来IE9不支持使用DirectX过滤器的渐变。

然而，通过一些游戏，你可以让他们使用数据URI和SVG的组合：

用于模拟渐变背景的SVG图像：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="20%" stop-color="#aaa" stop-opacity="1"/>
            <stop offset="90%" stop-color="#999" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

这导致以下CSS：

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+DQogICAgPGRlZnM+DQogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2FhYSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPC9kZWZzPg0KICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KPC9zdmc+");

提供了一个示例jsFiddle。