IE8中的CSS圆角
Posted
技术标签:
【中文标题】IE8中的CSS圆角【英文标题】：CSS rounded corners in IE8 【发布时间】：2011-10-27 23:39:56 【问题描述】：我在 IE8 中遇到了圆角问题。我尝试了几种方法都没有成功。
这是我的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
body
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 2px;
margin: 2px;
color: #505050;
line-height: normal;
p
margin: 4px;
.categoryheading3
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
.leftcolumn
width: 174px;
padding: 8px;
float: left;
display: inline-block;
background-color: transparent;
/*--min-height: 500px*/
overflow: hidden;
.lefttop
display: inline-block;
width: inherit;
margin: 0 5px 2em 0;
float: left;
width: 160px;
background-color: #FFFFFF;
border: 2px solid #297BB6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
在 Firefox 中产生这个：
但这在 IE8 中：
如果有人有任何提示，我将非常感激！
编辑：约瑟夫通过建议使用 pie.htc 提供帮助，但我仍在为这个元素不起作用：
.categoryheading3
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
behavior: url(PIE.htc);
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
【问题讨论】：
在我看来你的 CSS 缺少标准的边界半径属性 你的 IE8 屏幕截图实际上看起来像 Metro UI ish :) 【参考方案1】：Internet Explorer（版本 9 以下）本身不支持圆角。
有一个神奇的脚本会神奇地为你添加它：CSS3 PIE。
我用过很多次，效果惊人。
【讨论】：
这适用于所有角落都是圆形的元素，但是我似乎无法让它在只有左上角+右上角圆角的元素上工作 - 有什么建议吗？ @kevyn：你能告诉我你正在使用的 CSS 吗？ CSS3 PIE 仅支持速记属性 (border-radius: 5px 5px 0 0;)，不支持速记属性 (border-radius-topleft: 5px; etc.)。
您只使用供应商前缀的版本。 CSS3 PIE 使用标准的：border-radius。
PIE 正确渲染角，例如边框半径：30px 0 0 30px;，但它使我的 div 不透明。我正在使用不透明度：.6；和过滤器：alpha(opacity=60);
PIE 为我修复了圆角，但不知何故停止了背景颜色的工作，所以它似乎被击中和错过了【参考方案2】：
Rounded corners in IE8
Internet Explorer 8（及更早版本）不支持圆角，但是您可以考虑的其他解决方案很少：
使用圆角 Images 代替（this 生成器是一个很好的资源）
使用来自here 的jQuery Corner plugin
使用来自 here 的名为 CSS3 PIE 的非常好的脚本（Pro's & Con's here）
从here结帐CSS Juice
另一个不错的脚本是来自here
的IE-CSS3
尽管 CSS PIE 是最受欢迎的解决方案，但我建议您查看所有其他解决方案并选择最适合您需求的解决方案。
希望它有用。祝你好运！
【讨论】：
【参考方案3】：我不知道css3pie.com，看到这个帖子后非常有用的网站：
但是在测试之后它对我也不起作用。但是我发现将它包装在 .php 文件中效果很好。所以而不是：
behavior: url(PIE.htc);
使用这个：
behavior: url(PIE.php);
我把我的放在一个名为 jquery 的文件夹中，所以我的是：
behavior: url(jquery/PIE.php);
所以转到他们的下载或在此处获取：
http://css3pie.com/download-latest
并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。
试试吧！我做到了，它有效。希望这对其他人也有帮助。
【讨论】：
不幸的是，这在 IE8 上仍然没有为我做任何事情:( 这是因为您没有在网络服务器上为 .htc 文件配置正确的 MIME 类型。见：***.com/a/4672959/229587【参考方案4】：http://fetchak.com/ie-css3/ 适用于 IE 6+。如果 css3pie 不适合您，请使用它。
【讨论】：
【参考方案5】：PIE.htc 非常适合我 (http://css3pie.com/)，但有一个问题：
你应该写 PIE.htc 的绝对路径。当我使用相对路径时，它对我不起作用。
【讨论】：
看起来相对路径不是相对于这里的 css 文件，而是相对于 docroot ph33nyx 几乎是正确的。使用 Internet Explorer 行为时，被引用的文档是相对于调用 HTML 文件的，而不是 CSS 文件。请在使用时注意这一点，这样您就不会疯狂地试图找出它不起作用的原因。 我使用它的相对路径为behavior: url(../PIE/PIE.htc);，它工作正常。
levgen 你不知道我有多感谢谢谢你！！！你是对的，相对路径不起作用，我研究了整个派论坛，我只是绝望，但我使用了完整的路径，然后它起作用了【参考方案6】：
由于 Internet Explorer 本身不支持圆角。 因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名的网站都使用这种方法。
您还可以在网络上找到圆形图像生成器。一个这样的链接是http://www.generateit.net/rounded-corner/
【讨论】：
这是一个非常古老的方法，我不推荐这个。像 PIE 这样的库使 css3 在 ie8 中成为可能，这就是我们所需要的。以上是关于IE8中的CSS圆角的主要内容，如果未能解决你的问题，请参考以下文章