我如何在CSS中进行IE条件限制？

Question

如果我想根据用户正在查看页面的浏览器添加填充，有没有一种方法可以在CSS中执行以下操作：

如果IE填充：5px; 否则如果不是IE填充10px;

Answer 1

这是一个很好的参考： Quirksmode.org条件评论 。

虽然控制结构在标记而不是CSS中，但它实现了您的目标，并且在提供特定于浏览器的样式表时通常被认为是最佳实践。

Answer 2

最佳实践方法是为IE修复程序提供单个样式表，如下所示：

<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->

然后只需覆盖ie-styles.css文件中特定的导致问题的样式。

Answer 3

定位IE的所有版本

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

除IE之外的一切目标

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

仅针对IE 7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

仅针对IE 6

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

仅针对IE 5

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

仅针对IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

目标IE 6和LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

目标IE 7和LOWER

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

目标IE 8和LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

目标IE 6和更高

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

目标IE 7和更高

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

目标IE 8和更高

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

有关该主题的完整参考，Chris Coyier： 如何创建仅IE样式表

Answer 4

这是一种更简洁的方法，只在CSS中定位IE 10+

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  /* IE10+ CSS styles go here */

}

（来源： Phil Newcomer ）

Answer 5

如果你不介意代码中的丑陋，你可以使用像Holly hack这样的东西：

div { padding:5px; }
* html div { padding:10px; }

有一个巧妙的CSS Zen Garden示例，它提供了两个不同的设计，但我不记得它的名字。

Answer 6

尽管IE条件只能在html中使用而不能在CSS中使用，但您可以在CSS文件中使用以下内容进行快速和简短的测试/黑客攻击。

  p {
   /* all browsers */
   background-color: red; 

   /* for IE7 and below - append a * before the property */
   *background-color: blue; 

   /* for IE6 and below - append a _ before the property */
   _background-color: green;
  }

虽然您可以将此用于快速和短期的要求，但我认为您应该遵循上面给出的Mark Hurd对生产级重码的建议。