Question

我有以下css选择器

 body
 {
   margin: 0;
   font-family: "Arial" ;
   font-size: 18px;
   line-height: 25px;

  }

我想写条件，如果浏览器是IE，那么将line-height更改为10px

我搜索了一个类似的问题here，但是当我添加问题中提到的条件时它会抛出语法错误Missing property name before colon(:)。我跟着问题并修改了代码，如

    .bodyClass
    {
      margin: 0;
     font-family: "Arial";
     font-size: 18px;
     line-height: 25px;

     <!--[if IE 6]>
       line-height: 10px;     
     <![endif]-->

   }

如何在css选择器中编写条件语句？我不想为IE和其他浏览器创建不同的样式表

Answer 1

如果您不想创建单独的样式表，那么您有两种选择。

IE条件评论

使用条件注释为<html>标记提供类，例如：

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

这样你就可以在CSS中使用这样漂亮的自描述选择器：

html.ie6 .bodyClass { line-height: 10px}

CSS hacks

另一个选择是使用适当的CSS hacks来定位您感兴趣的浏览器。这种方法的优点是可以在不触及HTML / DOM的情况下完成。一个特定的hack只针对IE 6，同时仍然是语法上有效的CSS：

.bodyClass { _line-height: 10px; /* hack targeting IE 6 only */ }

如果你做决定使用CSS黑客攻击，请确保随附他们的评论，描述他们为帮助未来维护者所做的工作。

Answer 2

试试这个：

*line-height:10px;  //* is hack for IE7
line-height:10px\0/;  //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers 
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    line-height:10px;
}

Answer 3

您可以在标题内写入它们，然后加入样式表，例如

<!--[if IE 6]>
    <link href="~/folder/file.css" rel="stylesheet" type="text/css" />
 <![endif]-->

否则，如果您可以使用ASP.NET等服务器端，并使用Request.Browser检查其IE是否改变了样式。

Answer 4

#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;    
}

Demo Fiddle

Answer 5

尝试<!--[if lte IE 6]>

或者您可以尝试相反的方法并将行高添加为10然后使用

 do something; IE will ignore this, other browsers parse it 

设置其他浏览器的行高。

以下是使用CSS支持IE的链接

http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

另一个有用的网站是http://css3please.com/，其中显示了 IE ， Chrome 和 Firefox 的不同CSS。它还允许您实时编辑网站。

将浏览器特定条件放在CSS选择器中

5 个答案:

IE条件评论

CSS hacks