CSS3边框半径和Internet Explorer 8

Question

我在我的网页中使用CSS3 border-radius样式，我希望它在包括IE8在内的主要浏览器中兼容跨浏览器。

因此，我试图使用border-radius.htc文件来实现这一点。 无论在我的css样式中使用border-radius，我都编写了如下代码：

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

不幸的是，当我在IE8中检查网页时，所有具有border-radius行为的背景最终都没有显示。

该网页位于http://www.domainandseo.com/portfolio/dominos/index.html

任何建议都将受到高度赞赏。

Answer 1

早于9的Internet Explorer版本不支持此属性。 检查兼容性矩阵 。 如果您想在旧浏览器中使用圆角，则必须通过带有圆形边框图像的容器来实现它们。

Answer 2

我不知道您正在使用哪个“border-radius.htc”文件，但如果您使用的是CSS3 PIE ，那么这是一个已知问题 。 从他们的页面：

我知道解决这个问题的唯一方法是：

• 使目标元素位置：相对，或
• 使祖先元素位置：相对并给它一个z-index。

这两种解决方法都可能在子元素定位和z索引堆叠方面产生潜在的不良副作用。 PIE很容易强迫一个人或另一个人，但是：

• 根据具体情况，一个或另一个可能更合适，因此CSS作者需要能够控制选择哪一个。
• 强制位置：CSS之外的相对位置会使IE与其他浏览器不同步，从而导致混淆不一致。

Answer 3

您可能最好不要尝试使用JavaScript polyfill而不是尝试加载.htc文件。 想到的是Mike Alsup的Corner jQuery插件，可以在http://jquery.malsup.com/corner/找到。 您可以使用条件注释仅在IE 8或更早版本中加载它：

<!--[if lte IE 8]>
<script src="path_to_your_scripts_folder/jquery.corner.js"></script>
<script>
    $(function(){
        $('your_selector_here').corner('corner_radius_in_pixels');
    });
</script>
<![endif]-->

Answer 4

CSS3 PIE要求路径过去相对于HTML而不是CSS，这与您通过CSS加载的图像或@ font-face字体不同。 您可能会发现最好将绝对URL放在CSS中的PIE.htc文件中。

Answer 5

试试这个会起作用：

#main{position:relative;}                            

仅在IE特定样式表中提及此ID。