2

我有以下 CSS 选择器

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

  }

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

我在这里搜索了一个类似的问题，但是当我添加问题中提到的条件时，它会引发语法错误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 和其他浏览器创建不同的样式表

4

5 回答 5

7

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

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 黑客

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

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

如果您决定使用 CSS hack，请务必附上评论，描述他们为帮助未来的维护者所做的工作。

于 2013-10-10T09:31:53.800 回答
5

试试这个：

*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;
}
于 2013-10-10T09:32:29.133 回答
1

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

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

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

于 2013-10-10T09:32:40.610 回答
0

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

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

<!--[if !IE]>--> do something; IE will ignore this, other browsers parse it <!--<![endif]-->

为其他浏览器设置行高。

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

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

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

于 2013-10-10T09:41:11.127 回答
0 
#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;    
}

演示小提琴

于 2013-10-10T09:33:37.800 回答