删除 IE 特定样式表中的 border-radius 样式

Question

我的页面上包含两个 css 文件。

<link rel="stylesheet" href="/css/screen.css" />
<!--[if IE 8]>
    <link rel="stylesheet" href="/css/ie8.css"/>
<![endif]-->

现在在 screen.css 中我有这样的样式

ul.treelayout{
    list-style: none;
    margin: 0px 0px 10px 0px;   
    background-color: #fff;
    padding: 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #007b40;
}

我想删除 ie.css 中与半径相关的样式，这样 IE 中 ul.treelayout 的结果样式是

ul.treelayout{
    list-style: none;
    margin: 0px 0px 10px 0px;   
    background-color: #fff;
    padding: 3px;
    border: 1px solid #007b40;
}

似乎由于样式级联简单地编写没有 ie.css 中样式的类不起作用。有什么想法吗？

谢谢

问候 加布里埃尔

Answer 1

好吧，我不是要解释为什么；） - 但你可以反过来做，只给 非 IE 浏览器 提供 border-radius 样式.. 事实上通过条件注释的组合，您可以为 IE9 和其他浏览器提供边框半径样式，我不知道您的意思是哪个脚本发生冲突，但也许您也可以将脚本提供给需要它的浏览器？

这是一个示例（不使用 border-radius 但希望您能明白这个想法..）

<style type="text/css" media="screen">
div {
padding: 40px;
color: #fff;
}
</style>

<!--[if IE]>
<style type="text/css" media="screen">
div  {background: #00f}
</style>
<![endif]-->

<!--[if (!IE)|(gt IE 7)]><!-->
<style type="text/css" media="screen">
div  {background: #f00}
</style>
<!--<![endif]-->

HTML：

<div>
   <p>background is red in non-IE browsers,and IE gt 7  - but background is blue in other IE's</p>
</div>

关于上述条件注释..

第一个是常规样式，

第二个是“传统”隐藏条件注释，只有 IE 才能看到

第三个是显示注释，所有浏览器都可以看到，但 IE 仍然读取

您将通用规则放在普通工作表中的参数，以及边框半径里面的规则在第三个样式注释中的一个表中，

您可以更改第三个注释的参数，它基本上是说 if NOT IE OR is gt IE7

有关参数的更多信息：关于条件评论

Answer 2

ul.treelayout{
    list-style: none;
    margin: 0px 0px 10px 0px;   
    background-color: #fff;
    padding: 3px;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border: 1px solid #007b40;
}

哒哒。

Answer 3

由于样式表级联的方式，您只需要在 ie8.css 中包含此内容：

ul.treelayout {border-radius: 0;}

这将使所有样式保持相同，但它会删除 IE 边框半径。如果您想要进一步更改 IE，您可以根据需要添加它们。

覆盖始终包含的样式表时，您只需添加要覆盖的样式或已在您自定义的浏览器中显示的样式。这使得 css 文件更小，这对您的用户来说更好。