0

我想要确切的代码来获得这个页面的圆角http://www.freecsstemplates.org/preview/fotofolium/。当我使用 PIE.htc 文件时，它只有在我声明 position:relative; 时才有效。我在任何地方都使用它，这扰乱了布局。有人可以建议该模板没有位置属性的代码。

我没有提供 moz 和 webkit，但它在 safari、chrome 等其他平台上也可以使用。我只给了

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

使其在每个浏览器中都能正常工作。如果即使使用 PIE.htc 删除位置属性，它也不仅仅在 IE 中有效。我使用 moz、webkit 作为边框框，也许与 FF、Opera 等一起使用。

4

2 回答 2

0

利用border-radius

因为 IE 不支持border-radius，所以可以使用CSS3 PIE。这就是 PIE.htc 的来源。

于 2012-06-02T10:57:57.543 回答
0

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

没有position设置的圆角 div 的工作示例！

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弯角Demos和Page。

经测试

Windows XP 专业版 2002 Service Pack 3

  • 互联网浏览器 8.0.6001.18702
  • 歌剧 11.62
  • 火狐 3.6.16
  • Safari 5.1.2
  • 谷歌浏览器 18.0.1025.168 m
  • K-Meleon 1.5.4

Windows 7 家庭版服务包 1

  • Internet Explorer 9.0.8112.164211C
  • 歌剧 11.62
  • 火狐12.0
  • Safari 5.1.4
  • 谷歌浏览器 18.0.1025.168 m

Linux Ubuntu 12.04

  • 火狐12.0
  • Chromium 18.0.1025.151（开发人员内部版本 130497 Linux）
于 2012-06-02T11:36:29.987 回答