我如何在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對生產級重碼的建議。