IE 中的 CSS 圆角

发布于 2024-12-21 22:09:10 字数 1156 浏览 1 评论 0原文

我正在使用这个 .htc 逻辑使我的内容选项卡呈圆形，但它不起作用。我的选项卡结构如下所示。

<li id="profiletab1" class="selected">
   <a href="#">Overview</a>
</li>
<li id="profiletab2" class="">
   <a href="#">Overview</a>
</li>
...

为此的CSS代码

color: #4f4f4f;
 height: 35px;
 display: inline-block;
 padding: 0px 18px 0px 19px;
 font-size: 14px;
 line-height: 35px;
 -webkit-border-radius: 5px 5px 0px 0px;
 -moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
behavior: url(border-radius.htc);

background: #e7e7e7;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e7e7e7), to(#cccccc));
 background: -webkit-linear-gradient(#e7e7e7, #cccccc);
 background: -moz-linear-gradient(#e7e7e7, #cccccc);
 background: -ms-linear-gradient(#e7e7e7, #cccccc);
 background: -o-linear-gradient(#e7e7e7, #cccccc);
 background: linear-gradient(#e7e7e7, #cccccc);
 -pie-background: linear-gradient(#e7e7e7, #cccccc);
 border-right: 1px solid #b1b1b1;

原文

I am using this .htc logic to make my content tabs rounded but its not working. My tab structure looks like this.

<li id="profiletab1" class="selected">
   <a href="#">Overview</a>
</li>
<li id="profiletab2" class="">
   <a href="#">Overview</a>
</li>
...

css code for this

color: #4f4f4f;
 height: 35px;
 display: inline-block;
 padding: 0px 18px 0px 19px;
 font-size: 14px;
 line-height: 35px;
 -webkit-border-radius: 5px 5px 0px 0px;
 -moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
behavior: url(border-radius.htc);

background: #e7e7e7;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e7e7e7), to(#cccccc));
 background: -webkit-linear-gradient(#e7e7e7, #cccccc);
 background: -moz-linear-gradient(#e7e7e7, #cccccc);
 background: -ms-linear-gradient(#e7e7e7, #cccccc);
 background: -o-linear-gradient(#e7e7e7, #cccccc);
 background: linear-gradient(#e7e7e7, #cccccc);
 -pie-background: linear-gradient(#e7e7e7, #cccccc);
 border-right: 1px solid #b1b1b1;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅沫记忆 2024-12-28 22:09:10

IE 不支持 CSS 3 直到 IE 9

才能使用

border-radius

in css,

添加

如果

你想在 IE 7/8 中使用它们，

你将需要某种排序一些 javascript 库的帮助。

例如 http://css3pie.com/

IE does not support CSS 3 until the IE 9

to use

border-radius

in css,

add

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

and

if you want to have them in IE 7/8,

you will need some sort of help with some javascript library.

e.g. http://css3pie.com/

回复收藏 0 原文

还在原地等你 2024-12-28 22:09:10

它可以在任何 IE 浏览器中运行吗？还要仔细检查 .htc 文件的路径，

我正在使用 PIE.htc 方法，我的 CSS 是这样的。

#maincol #content {
float:left;
background-color:#FFF;
width:100%;
height:399px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px; 
behavior: url(../css/PIE.htc);
}

我还测试并验证了它适用于所有版本的 IE。我所要做的就是将ie.htc 文件放入CSS 文件夹中，然后将行为添加到我想要圆角的元素中。

Is it working in any IE browser? Also double check the path of your .htc file

I am using the PIE.htc method and my CSS is something like this.

#maincol #content {
float:left;
background-color:#FFF;
width:100%;
height:399px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px; 
behavior: url(../css/PIE.htc);
}

Also I have tested and verified that it works in all versions of IE. All I had to do was put the pie.htc file in my CSS folder and then add the behavior to the elements that I wanted to round the corners on.

回复收藏 0 原文