有些瀏覽器有大小的問題，當我們設計一個模板時，該模板運行在Firefox上，但是當我們使用IE打開它時，大小有問題。如何編寫使用特殊瀏覽器運行的css規則？
我如何寫CSS爲了與特殊類型的瀏覽器上運行：
例如：
div{
width:500px;
/*I want write a rule that the div's width be 400px in IE, or be 100 in Firefox, How?/
}
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
同樣地，對於IE 5的任何版本（包括5.0，5.01，5.5等），使用以下：
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
檢測IE 5的小版本有點棘手。當你指定一個小版本時，你需要得到正確的整個版本號。例如，爲了檢測IE 5.5的發佈版本，你需要下面的代碼：
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
如果您的訪客有一個版本的IE 5.5的，不是有確切的版本號（例如，測試將失敗，如果他/她已經使用其中一個服務包更新了IE 5.5）。您可以使用比較運算符「lt」（小於），「lte」（小於或等於），「gt」（（小於或等於），小於或等於）「gt」來使生活更容易，這些webmasters需要測試整個IE版本的範圍。大於）和「gte」（大於或等於）。
例如，爲了測試對於大於或等於6的IE版本的所有版本（即支持條件註釋），則可以使用
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
上面的代碼示例工作，因爲一個普通的瀏覽器看到整個塊作爲HTML註釋，因爲它們被包含在「」中。然而IE 5到IE 9會嘗試解析這個塊，看它是否有特定的指令。如前所述，IE 10將表現得像一個普通的瀏覽器並忽略評論。
您也可以使用此方法排除某個樣式表。例如，要排除CSS文件「not-ie。CSS」從IE 6，用途：
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
只想指定的webkit，其中包括谷歌和Safari瀏覽器，包括所有要使用只指定的Webkit在以下@media塊的CSS：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* all your css here */
}
您可以創建IE一個額外的樣式表，將覆蓋你的標準風格。
將此放在您的<head>部分下你經常style.css：
<!-- IE8 and lower CSS fix -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
並在ie8-and-down.css你可以把下面的CSS：
div {
width: 400px;
}
難道這就是你要找的人？
嘗試此爲所有瀏覽器
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone/mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :(*/
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0\0) {
#veintidos { color: red}
}
沒有伴隨的HTML，這個CSS對於OP來說沒有任何用處，因爲看到他不能'測試'任何東西。它也不直接回答如何使400px寬的問題。 – Mirage
基本上，沒有JS你不能這樣做，如果你在不同的瀏覽器中獲得不同的寬度，你在基本級別上做了錯誤的處理。 –
我不會讓它成爲答案的原因我會複製[這篇文章]（http://css-tricks.com/how-to-create-an-ie-only-stylesheet/），它總結了幾乎所有的東西，直到IE8。也就是說，您應該花一些時間製作跨瀏覽器樣式表，或者您可以放棄對舊版IE的支持。 –