Question

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

如果IE这样做填充：5像素; 否则，如果不是IE 填充10px;

Answer 1

这是一个很好的参考：Quirksmode.org Conditional Comments。

虽然控制结构在标记而不是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：How To Create an IE-Only Stylesheet

Answer 4

如果您不介意代码中的丑陋，可以使用类似Holly hack的内容：

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

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

Answer 5

虽然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上面给出的生产级重码的建议。

Answer 6

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

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

  /* IE10+ CSS styles go here */

}

（资料来源：Phil Newcomer）

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

6 个答案: