IE9 做他想做的事？

Question

我有一个带有下拉菜单的网站，我使用chosen 来获得漂亮的外观。

除了 IE9 之外，它在所有浏览器中的外观都相同（hoover = 灰色背景）。

使用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

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。

Answer 3

MS (IE

代替：

.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 );  
}