1. 程式人生 > >通過條件註釋hack建立只對IE生效的樣式

通過條件註釋hack建立只對IE生效的樣式

對於從事web開發的人來說,如何解決IE與其他瀏覽器樣式的一致性一直是一件頭痛的事情,特別是IE還分出了好幾個版本你,目前最新的是IE8,用的最多的還是那個早該淘汰的IE6,同一種寫法的css在IE各個版本之間也會出現不同的結果...
對於這種問題有人使用hack來解決,今天要說的就是通過條件註釋來選擇與瀏覽器相對的樣式表,條件註釋不只是對載入css起作用,對於載入javascript同樣有效。
例如下面這個,如果使用的是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]-->
針對IE7:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->
針對IE6:
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
針對IE5
<!--[if IE 5]> <link rel="stylesheet" type="text/css" href="ie5.css" /> <![endif]-->
針對IE6及IE6以下的版本:
<!--[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]-->
針對IE7及IE7以下的版本:
<!--[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]-->
針對IE8及IE8以下的版本:
<!--[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]-->
針對IE6以上版本包含IE6:
<!--[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]-->
針對IE7以上版本包含IE7:
<!--[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]-->
針對IE8以上版本包含IE8:
<!--[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]-->