Question

据我所知，IE9应该支持圆角的CSS。我显然编写了我的页面，因为这在IE9中不会发生 - 尽管它在Chrome和FF中正确显示。

* 我已编辑过CSS以反映以下答案中的建议 - 问题仍在发生* 我需要左上角和左下角只对包含站点主导航的div进行舍入。

主机包显示框中的“立即激活”按钮也不起作用。

要查看的网站链接是http://activehost.co.nz

我已经检查了其他问题 - 最常见的原因（使用前缀）不是我正在做的事情。

部分的相关CSS如下。

导航：

    #main_nav {
    margin: 0px 0px 10px 0px;
    float: right;
    height: 37px;
    /*background:url(../img/nav_bg.png);
    background-repeat: repeat-x;*/
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px 0px 0px 20px;
    clear: right;

}

“立即激活”按钮的CSS：

     .hosting_order {
    position: absolute;
    top: 148px;
    border: none;
    height: 35px !important;
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    width: 120px;
    padding: 0px 20px;
    font-weight: bolder;
    font-size: 1.1em;
    border-radius:20px;
    box-shadow: 2px 2px #888888;
}

背景图像CSS是产生渐变效果 - 我想知道这是不是问题？

Answer 1

这是因为你为同一个元素组合了filter和border-radius。尝试将border-radius应用于一个元素，并过滤为其子元素。

Answer 2

请参阅有关元标记的问题以及消除的其他一些可能的问题/流程：IE9 border-radius

Answer 3

对于IE9，你是对的，它不喜欢边框半径和滤镜组合。这是我遵循的，它在IE9以及所有其他浏览器中都运行良好。

https://github.com/bfintal/jQuery.IE9Gradius.js

希望有所帮助！

Answer 4

如果您使用的是“左下角”，则只需要为边框半径定义一个数字，依此类推。通过指定两个数字，IE9可能无法正确解释它。

如果您使用以下内容，则第一个数字是左上角，第二个是右上角，第三个是左下角，第四个是左下角。

    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    -0-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;

Answer 5

使边框半径与IE浏览器兼容，请按照下列步骤操作：

在IE中打开设置选项。
转到兼容性和视图设置。
取消选中＆＃34;在兼容性视图中显示Intranet网站＆＃34;以及取消选中＆＃34;使用微软兼容性列表＆＃34;。

圆角不适用于IE9

5 个答案: