0

I am using CSS3 border-radius styles in my webpage and I want it to be cross-browser compliant across major browsers including 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:

   -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.

The webpage is at http://www.domainandseo.com/portfolio/dominos/index.html

Any suggestions would be highly appreciated.

4

5 回答 5

2

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

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

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

这两种解决方法都可能在子元素定位和 z-index 堆叠方面产生潜在的不良副作用。PIE 可以很容易地强制其中一个或另一个本身，但是：

  • 根据具体情况，一种或另一种可能更合适，因此 CSS 作者需要能够控制选择哪一种。
  • 在 CSS 之外强制 position:relative 会使 IE 与其他浏览器不同步，从而导致混乱的不一致。
于 2012-11-08T07:31:52.933 回答
2

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

于 2012-11-08T06:40:21.653 回答
1

您最好尝试使用 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]-->
于 2012-11-08T07:17:01.107 回答
0

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

于 2013-05-23T17:41:29.030 回答
-3

试试这个它会工作：

#main{position:relative;}

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

于 2012-11-08T07:02:19.690 回答