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中与radius相关的样式，以便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

好吧我的理由不是;） - 但你可以反过来这样做，只给{strong>非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仍会读取参数

您可以将常用规则放在普通工作表中，并将边框半径规则放在第三个样式注释中的工作表中

你可以改变第三条评论的论点，它基本上是说如果不是IE OR 是gt IE7

有关参数的更多信息：About Conditional Comments

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;
}

ta da。

Answer 3

由于样式表的级联方式，你只需要在你的ie8.css中有这个：

ul.treelayout {border-radius: 0;}

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

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

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

3 个答案: