IE8 中的 CSS 圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7077331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS rounded corners in IE8
提问by falter
I'm having issues with rounded corners in IE8. I've tried a few methods without success.
我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。
Here is my code:
这是我的代码：
<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>
Which produces this in Firefox:
在 Firefox 中产生这个：
But this in IE8:
但这在 IE8 中：
If anyone has any tips I'd be very grateful!
如果有人有任何提示，我将不胜感激！
edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:
编辑：约瑟夫通过建议使用 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;
}
回答by Joseph Silber
回答by Lior Elrom
Rounded corners in IE8
IE8中的圆角
Internet Explorer 8 (and earlier versions) doesn'tsupport rounded corners, howeverthere are few other solutions you may consider:
的Internet Explorer 8（或更早版本）不支持圆角，但是也有可能会考虑一些其他的解决方案：
Use Rounded Corners
Imagesinstead (thisgenerator is a good resource)Use a
jQuery Corner pluginfrom hereUse a very good script called
CSS3 PIEfrom here(Pro's & Con's here)Checkout
CSS Juicefrom hereAnother good script is
IE-CSS3from here
Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.
尽管 CSS PIE 是最受欢迎的解决方案，但我建议您查看所有其他解决方案并选择最适合您需求的解决方案。
Hope it was useful. Good Luck!
希望它有用。祝你好运！
回答by Chud37
I didnt know about css3pie.com, a very useful site after seeing this post:
看到这篇文章后，我不知道 css3pie.com，一个非常有用的网站：
But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:
但是经过测试它对我也不起作用。但是我发现将它包装在 .PHP 文件中效果很好。所以而不是：
behavior: url(PIE.htc);
use this:
用这个：
behavior: url(PIE.php);
I put mine in a folder called jquery, so mine was:
我把我的放在一个名为 jquery 的文件夹中，所以我的是：
behavior: url(jquery/PIE.php);
So goto their downloads or get it here:
所以去他们的下载或在这里得到它：
http://css3pie.com/download-latest
http://css3pie.com/download-latest
And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.
并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。
Try it! I did, it works. Hope this helps others out too.
尝试一下！我做到了，它有效。希望这也能帮助其他人。
回答by Gautham
http://fetchak.com/ie-css3/works for IE 6+. Use this if css3pie doesn't work for you.
http://fetchak.com/ie-css3/适用于 IE 6+。如果 css3pie 不适合您，请使用它。
回答by Zhenya
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
PIE.htc 对我来说很棒（http://css3pie.com/），但有一个问题：
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
你应该写 PIE.htc 的绝对路径。当我使用相对路径时，它对我不起作用。
回答by zixtor
As Internet Explorer doesn't natively support rounded corners. So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.
由于 Internet Explorer 本身不支持圆角。因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名的网站都使用这种方法。
You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/
您还可以在网络上找到圆形图像生成器。其中一个链接是http://www.generateit.net/rounded-corner/
