html - 圆角黑客 - 这里做错了什么？

Question

我已经实现了一个 .htc 行为来尝试从这里获得 IE-6-8 的圆角：http: //jonraasch.com/blog/css-rounded-corners-in-all-browsers

即使遵循它推荐的所有小 IE 方法，似乎也无法让它工作。

#callbox {
position:relative;
background-image:url(images/callbox_bg.png);
width:360px;
height:75px;
float:right;
padding:10px 20px 0px 10px;
font-size:26px;

display:block;


border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;


behavior: url(/css/border-radius.htc);
zoom:1;

}

Answer 1

在他们的例子中，他们有border-radius: 15px; after behavior。看看这是否有效或你。还要查看 IE 的注意事项列表，确保其中不适用于您的布局。

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}

Answer 2

在我看来没问题，你确定 htc 文件路径是正确的，即它可以通过 访问http://example.com/css/boarder-radius.htc吗？

Answer 3

通常在 CSS 中，url 路径是相对于文档的。使用 .htc 文件虽然它需要相对于站点根目录。

采取以下站点结构：

Root
   - images/
      - image.png
   - css/
      - layout.css
- index.html
- border-radius.htc

要在您的 layout.css 文件中使用图像，您的 url 将是('../images/image.png') 要使用 .htc 文件，它将是('../border-radius.htc')

此外（这可能不相关），但要让 CSS3PIE.htc 正常工作，您需要添加 position: relative 到样式。