Html IE9做他想做的事？

我有一个带有下拉菜单的网站，我正在使用它来打造一个漂亮的外观

除了IE9，它在每个浏览器中看起来都一样（胡佛=灰色背景）

测试是用

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>

看起来IE9没有得到这些属性

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

谢谢你的提示，谢谢

MS（即<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 );  
}

MS（IE<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 );  
}

---

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>

---

提供了一个示例。

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>

提供了一个示例。

帮助我解决问题

我的代码现在如下所示：

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

这工作做得很好

医生帮我解决了问题

我的代码现在如下所示：

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

---

这工作做得很好

谢谢你的帮助！我尝试了你的解决方案，但背景仍然是蓝色的。谢谢你的帮助！我尝试了你的解决方案，但背景仍然是蓝色的。链接为+1。这是有用的。如果没有一个好的推荐人，就会错过一些东西+1用于链接。这是有用的。如果没有一个好的推荐人，就会错过一些东西！我喜欢这篇文章的标题：）我喜欢这篇文章的标题：）