Question

我使用以下CSS制作的任何列表在IE8和FF4中的显示方式都不同。 IE8没有圆角，但当我将鼠标悬停在它上面时，FF4不会改变颜色。他们中的任何一个是对的吗？

ul#mend {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    float: left;
    text-align: left;
}

ul#mend li {
    display: inline;
    list-style: none;
}

ul#mend li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#mend li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #FF99CC;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#mend li a:hover {
    background-color: #000000;
    text-decoration: none;
}

ul#mend li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#mend li.selected a {
    background-color: #fff;
    color: #000;
}

编辑：添加HTML

        <div id="menucontainer">

            <ul id="mend">
                <li>@Html.ActionLink("TicTacToe", "TicTacToe", "Games")</li>
            </ul>


            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("French", "French", "Home")</li>
            </ul>


        </div>

Answer 1

Internet Explorer本身不支持圆角。 You need to use a hack to get that done

Answer 2

IE 9现在支持圆角。对于以前版本的IE，我偏爱这个解决方案：

CSS3 Pie

Answer 3

我可能会遗漏一些内容，但您所包含的第二个列表（id =“menu”）在您的示例中没有任何相应的CSS。

备份其他人所说的IE8不支持border-radius。

CSS在不同的浏览器中

3 个答案: