Question

我在我的搜索框中应用了圆角样式，但问题是它在IE9中显示正常风格和角落风格，而在IE10中却没有。请看一下使用HTML代码从web和css样式拍摄搜索框图像的快照。

IE9

IE10

代码：

＆＃13;

.searchform {
    display: inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    *display: inline;
    border: solid 1px #d2d2d2;
    padding: 3px 5px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background: #f1f1f1;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform .searchbutton {
        color: #fff;
        border: solid 1px #494949;
        font-size: 11px;
        height: 27px;
        width: 27px;
        text-shadow: 0 1px 1px rgba(0,0,0,.6);
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
        background: #5f5f5f;
        background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
        background: -moz-linear-gradient(top, #9e9e9e, #454545);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    }

＆＃13;

<div class="top-search">
                                                <div class="searchform" id="dvSearch" runat="server">
                                                    <table border="0">
                                                        <tr>
                                                            <td>
                                                                <select id="searchSelect">
                                                                    <option selected="selected" value="">Select Type ...</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="search" id="searchText" value="Enter Search Text"
                                                                    title="Enter Search Text"
                                                                    class="searchfield" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" onclick="clearThis(this)" />
                                                                <input class="searchbutton" type="button" value="Go" id="ancSearch" onclick="SearchFunction()" />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>

＆＃13;

谢谢， NAG

Answer 1

您是否启用了正确的Doctype和meta标记？我相信IE9需要它们来渲染CSS3属性。

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE9的CSS圆角问题

1 个答案: