IE8 中的 CSS 圆角
我在 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;
}
I'm having issues with rounded corners in IE8. I've tried a few methods without success.
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:
But this in 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:
.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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
Internet Explorer（版本 9 以下）本身不支持圆角。
有一个令人惊叹的脚本可以神奇地为您添加它：CSS3 PIE。
我已经使用了很多次，效果惊人。
Internet Explorer (under version 9) does not natively support rounded corners.
There's an amazing script that will magically add it for you: CSS3 PIE.
I've used it a lot of times, with amazing results.
IE8 中的圆角
Internet Explorer 8（及更早版本）没有支持圆角，但是还有您可以考虑的其他解决方案：
使用圆角
图像代替（这个生成器是一个很好的资源）使用 此处
CSS3 PIE（专业人士和骗局此处）结帐
CSS Juice来自此处< /strong>另一个好的脚本是 此处
虽然 CSS PIE 是最流行的解决方案，但我建议您查看所有其他解决方案并选择最适合您需求的解决方案
我希望它有用。祝你好运！
Rounded corners in IE8
Internet Explorer 8 (and earlier versions) doesn't support rounded corners, however there are few other solutions you may consider:
Use Rounded Corners
Imagesinstead (this generator 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 hereEven though CSS PIE is the most popular solution, I suggest you review all other solutions and choose what works best for your needs.
I hope it was useful. Good Luck!
看到这篇文章后，我不知道 css3pie.com，这是一个非常有用的网站：
但经过测试后，它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以不要：
使用这个：
我把我的放在一个名为jquery的文件夹中，所以我的是：
所以转到他们的下载或在这里获取它：
http://css3pie.com/download-latest
并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。
试试吧！我做了，它有效。希望这也能帮助其他人。
I didnt know about css3pie.com, a very useful site after seeing this post:
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:
use this:
I put mine in a folder called jquery, so mine was:
So goto their downloads or get it here:
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.
Try it! I did, it works. Hope this helps others out too.
http://fetchak.com/ie-css3/ 适用于 IE 6+。如果 css3pie 不适合你，请使用它。
http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.
PIE.htc 对我来说非常有用（http://css3pie.com/），但有一个问题：
你应该写PIE.htc 的绝对路径。当我使用相对路径时，它对我不起作用。
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
由于 Internet Explorer 本身不支持圆角。
因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。
您还可以在网络上找到圆形图像生成器。其中一个链接是 http://www.generateit.net/rounded-corner/
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.
You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/