javascript CSS3 边框半径和 Internet Explorer 8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13283416/
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
CSS3 border radius and Internet Explorer 8
提问by Alex Zahir
I am using CSS3 border-radius styles in my webpage and I want it to be cross-browser compliant across major browsers including IE8.
我在我的网页中使用 CSS3 边框半径样式，我希望它跨浏览器兼容包括 IE8 在内的主要浏览器。
Therefore, I am trying to use the border-radius.htc file to achieve this. Wherever in my css styles the border-radius is used, i have coded something like:
因此，我试图使用 border-radius.htc 文件来实现这一点。无论在我的 css 样式中使用 border-radius 的任何地方，我都编写了如下代码：
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
behavior:url(border-radius.htc);
Unfortunately, when I check the webpage in IE8, all the backgrounds that have border-radius behavior end up not showing at all.
不幸的是，当我在 IE8 中查看网页时，所有具有边界半径行为的背景最终都没有显示。
The webpage is at http://www.domainandseo.com/portfolio/dominos/index.html
该网页位于http://www.domainandseo.com/portfolio/dominos/index.html
Any suggestions would be highly appreciated.
任何建议将不胜感激。
回答by Konstantin Dinev
Internet explorer versions earlier than 9 do not support this property. Check the compatibility matrix. If you want rounded corners in old browsers you have to achieve them through an container carrying the rounded border image.
早于 9 的 Internet Explorer 版本不支持此属性。检查兼容性矩阵。如果您想在旧浏览器中使用圆角，则必须通过带有圆角边框图像的容器来实现。
回答by MarcoK
I don't known which "border-radius.htc" file you're using, but if you're using something like CSS3 PIE, it's a known issue. From their page:
我不知道您使用的是哪个“border-radius.htc”文件，但如果您使用的是CSS3 PIE 之类的文件，这是一个已知问题。从他们的页面：
The only way I know of to work around this is to either:
- make the target element position:relative, or
- make the ancestor element position:relative and give it a z-index.
Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:
- One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
- Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.
我所知道的解决此问题的唯一方法是：
- 使目标元素位置：相对，或
- 使祖先元素 position:relative 并给它一个 z-index。
这两种变通方法都可能在子元素定位和 z-index 堆叠方面产生潜在的不需要的副作用。PIE 可以很容易地强制其中之一，但是：
- 根据特定情况，其中一种可能更合适，因此 CSS 作者需要能够控制选择哪一种。
- 强制位置：相对于 CSS 之外会使 IE 与其他浏览器不同步，导致混淆不一致。
回答by Tieson T.
You might be better off trying to use a JavaScript polyfill rather than trying to load an .htc file. One that comes to mind is Mike Alsup's Corner jQuery plugin, found at http://jquery.malsup.com/corner/. You could use conditional comments to only load it in IE 8 or earlier:
您最好尝试使用 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]-->
回答by Bill Robbins
CSS3 PIE requires the path used to be relative to the HTML and not to the CSS which is different than say an image or @font-face font you're loading via CSS. You might find it works best to place the absolute URL to your PIE.htc file in your CSS.
CSS3 PIE 需要用于相对于 HTML 而不是 CSS 的路径，这与通过 CSS 加载的图像或 @font-face 字体不同。您可能会发现将 PIE.htc 文件的绝对 URL 放在 CSS 中效果最好。
回答by Gopikrishna
Try this it will work:
试试这个它会起作用：
#main{position:relative;}
mention this id only in IE specific stylesheets.
仅在 IE 特定的样式表中提及此 ID。
