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>

这是我想要使用它的一个例子（需要bootstrap）。搜索栏上有一个按钮。按钮将具有顶部颜色（浅红色），底部颜色较深，带有搜索图标。这是我目前正在使用的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;
}

问题是即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/

它确实做了一件很容易的一流工作！

拆分ie8 +支持的背景颜色

2 个答案: