TESTED ON

Question

我希望确切的代码段能够为此页面http://www.freecsstemplates.org/preview/fotofolium/提供圆角。当我使用PIE.htc文件时，它只在我声明position：relative时才起作用;无论我在哪里使用它＆amp;那令人不安的布局。有人可以建议没有该模板的位置属性的代码。

我没有给moz＆amp; webkit但是，它正在其他工作，如safari，chrome。我只给了

border-radius:5px;
behavior: url("PIE.htc");
position: relative;

使其适用于每个浏览器。如果我删除位置属性，即使使用PIE.htc，它也不能仅在IE中工作。我使用moz，webkit用于边框，也许可以用FF，Opera等工作。

Answer 1

使用border-radius

由于IE不支持border-radius，因此您可以使用CSS3 PIE。那就是PIE.htc的来源。

Answer 2

您可以为所有浏览器设置圆角的CSS声明，并为旧版Internet Explorer使用HTC。

Working example对于带有圆角的div，没有position设置！

<强> CSS

.curved {
    -moz-border-radius:10px;        /* Firefox */
    -webkit-border-radius:10px;     /* Safari and chrome */
    -khtml-border-radius:10px;      /* Linux browsers */
    border-radius:10px;             /* CSS3 */
    behavior:url(border-radius.htc) /* Internet Explorer */
}

.menu_buttons {
    margin: 40px;
    width: 100px;
    line-height: 1.1em;
    float: left;
    vertical-align: middle;    
    cursor: pointer;
    text-align: center;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: pink;
    border: 1px solid red;
}

示例HTML

<div class="menu_buttons curved">.menu_buttons element</div>

下载border-radius.htc，然后查看CSS curved corner Demos and Page。

TESTED ON

Windows XPProfissionalversão2002Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4

Windows 7 Home Edition Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0.1025.151（Developer Build 130497 Linux）

没有位置相关的圆角

2 个答案:

TESTED ON