ie8 +支持的拆分背景颜色[重复]

Question

我想分割我拥有的几个按钮的背景颜色，最好是百分比，因为会有 2 到 3 种颜色。我现在拥有它的方式适用于 chrome 和 ie10。我想用这个功能支持 ie8 和 9。

    <div class="col-sm-12 no-wrap">
        <input type="text" class="text-input">
        <button type="button" id="search-glyph"><span class="glyphicon glyphicon-search search-glyph"></span></button>
    </div>

这是我想使用它的示例（需要引导程序）。搜索栏附有一个按钮。该按钮将具有顶部颜色（较浅的红色）和底部较暗的搜索图标。这是我目前正在使用的 css。

.text-input {
float: left;
padding-left: 10px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
background-color: #f0f0f0;
width: 200px;
height: 34px;
border-top: 1px solid #231f20;
border-left: 1px solid #231f20;
border-bottom: 1px solid #231f20;
border-right: 0;
}

.text-input:focus {
outline-color: #ed1c24;
}

#search-glyph {
text-align: center;
height: 34px;
width: 34px;
color: #ffffff;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-top: 1px solid #231f20;
border-right: 1px solid #231f20;
border-bottom: 1px solid #231f20;
background: linear-gradient(#d91616 50%, #c20404 50%);
border-left: 0;
}

#search-glyph:focus {
outline: 0;
}

问题在于 ie 8 和 9 不支持线性渐变。任何人都可以在这些浏览器版本中使用它吗？

Answer 1

您可以使用以下功能，适用于 IE6-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d91616', endColorstr='#c20404',GradientType=1 ); /* IE6-9 */

Answer 2

对于渐变的跨浏览器兼容性，最好使用以下站点：

http://www.colorzilla.com/gradient-editor/

它在简化它方面做得非常出色！