边界半径的问题，7

。我已低于我用我的网站，除了IE菜单的图像，所有其他浏览器呈现正确的输出：边界半径的问题，7

enter image description here

即使在IE9中，悬停效果应该是曲线，但它会产生矩形效果。

的Firefox，Safari和Chrome浏览器的罚款： enter image description here

的CSS

header nav { 
padding:7px 0 10px 0; 
} 
header nav ul { 
float:right; 
padding:2px 0 0 0; 
} 
header nav ul li { 
    float:left; 
    padding-left:4px; 
    } 
    header nav ul li a { 
    position:relative; 
    float:left; 
    font-size:14px; 
    color:#fff; 
    text-decoration:none; 
    font-family: 'ColaborateThinRegular'; 
    text-transform:uppercase; 
    height:32px; 
    line-height:32px; 
    background-color:#181717; 
    padding:0 36px 0 10px; 
    border-radius:17px; 
    -moz-border-radius:17px; 
    -webkit-border-radius:17px; 
    } 
    header nav ul li a:hover, 
    header nav ul li a.current { 
    background-image: -moz-linear-gradient(top, #E53088, #E530C1); /* FF3.6 */ 
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E53088),color-stop(1, #E530C1)); /* Saf4+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1'); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1')"; /* IE8 */ 
border-radius:17px; 
    -moz-border-radius:17px; 
    -webkit-border-radius:17px; 

    }

我正在寻找像火狐，Chrome和Safari浏览器相同的行为

来源

2011-10-17 Mr A

'边界radius'是CSS3功能，而IE6/7/8 CSS3时代以前的浏览器。 –

对不起，我忘了添加我正在使用的CSS，我刚刚上传了它 –

在Internet Explorer中的梯度过滤器没有得到由border-radius在Internet Explorer中截取9.我能想到的唯一的解决方案涉及具有内<div>元件与梯度施加：

<nav> 
    <ul> 
    <li> 
     <div class="gradient">Home</div> 
    </li> 
    </ul> 
</nav>

应用border-radius到<li>元素，梯度为<div class="gradient">。这应该会给出正确的结果。

唯一的其他选择，因为萨尔曼中提及，为CSS3 PIE，其变通解决此问题为你和在旧版本的IE实现border-radius。我在几个项目中使用它，它工作得很好。

来源

2011-10-17 10:55:08

这是一个在IE中的错误，我们总是不得不使用黑客来解决IE问题，为什么他们不使它像铬一样简单.. –

嗯，这听起来像它可能是一个IE9的错误。其他浏览器在过去已经通过这种边界半径的问题（例如，Firefox 3.0没有剪切带有边界半径的''标签的角落），所以如果这是IE错误，那么令人沮丧的是IE没有从别人的错误中吸取教训。 – Spudley

@Spudley：我相信这只是因为过滤器已过时。他们似乎没有得到每个版本的IE更新，这也可以解释为什么alpha问题从未被其他过滤器修复。一个过滤器只是看到一个元素的尺寸，并重新绘制一个矩形代替元素（类似于二元行为的工作方式）。我不会感到惊讶，如果过滤器已被弃用，甚至在IE 11中不存在。 –

尝试

.class { 
border-style: solid; 
border-width: 2px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px; 
}

只是一个简单的例子

来源

2011-10-17 10:41:34 Side

对不起，我忘了添加我正在使用的CSS，我刚刚上传它 –

看看CSS3 PIE项目。它将在IE 6至9中提供各种CSS3功能;包括圆角。

来源

2011-10-17 10:42:22

对不起，我忘了添加我正在使用的CSS，我刚刚上传it –

我只是看着你的CSS，我确定CSS3 PIE会使'线性渐变'和'border-radius'属性在老版本的IE中工作。在IE的项目主页上打开演示，看看它是否给你预期的结果。 –

+1 CSS3Pie非常适合这类事情，并且会解决您的IE7/8问题。（不知道你的IE9问题;这是一个单独的问题，完全） – Spudley

Twitter的引导执行以下操作来解决这个问题：

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

来源

2012-07-09 17:17:37

边界半径的问题，7

回答

相关问题