ie css hack

最後更新：2017-03-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：doc ora 針對分享 height idt size lte ie8

1.css屬性針對ie的特殊符號

ie6:

_property: value

-property: value

不支援擇符中的 !important。

ie6,ie7:

+property: value;

*property: value;

*+property: value;

ie6,ie7,ie8,ie9,ie10:

property: value\9;

ie8,ie9,ie10,ie11:

property: value\0;

ie8,ie9,ie10:

property: value\9\0;

下邊是一個簡單demo↓↓↓

<!DOCTYPE html><html>    <head>        <meta charset="GBK">        <title></title>        <style type="text/css">            div{height: 40px;width: 40px;margin:10px;border: 1px;float: left;}            div{background:#000;}            .div1{_background:red;}/* ie6 */            .div2{-background:blue;}/* ie6 */            .div3{+background:green;}/* ie6 & ie7 */            .div4{*background:greenyellow;}/* ie6 & ie7 */            .div5{*+background:orange;}/* ie6 & ie7 */            .div6{background:mistyrose\9;}/* ie6 & ie7 & ie8 & ie9 & ie10 */            .div7{background:magenta\0;}/* ie8 & ie9 & ie10 & ie11 */            .div8{background:brown\9\0;}/* ie8 & ie9 & ie10 */            .div9{background:cyan !important;background:darkcyan;}/*除ie6*/        </style>    </head>    <body>        <div class="div1"></div>        <div class="div2"></div>        <div class="div3"></div>        <div class="div4"></div>        <div class="div5"></div>        <div class="div6"></div>        <div class="div7"></div>        <div class="div8"></div>        <div class="div9"></div>    </body></html>

上邊的demo中，div的預設顏色是黑色。

是個個瀏覽器對具體特殊符號認可情況。

在這裡需要留意一下‘\9’和‘\9\0’的具體支援情況

關於‘\9‘和‘\9\0’，我現在發現的對css個別支援不一樣的是background含圖片和border兩個

background: url(../img/load-image-s.jpg)\9;/* ie6 & ie7 & ie8 */
background: url(../img/load-image-s.jpg)\9\0;/*ie8*/
background-image: url(../img/load-image-s.jpg)\9;/* ie6 & ie7 & ie8 */
background-image: url(../img/load-image-s.jpg)\9\0;/*ie都不支援*/

其中‘\9‘支援background-image的只有ie6/ie7/ie8。 ie9/ie10是不支援的。

但是‘\9\0’的background-image寫法，ie是都不支援的，而且只有ie8支援background中含有圖片連結

border: 5px solid #008000\9;\*ie6-11*\border: 5px solid #008000\9\0;\*ie8-11*\border-color:#008000\9;\*ie6-11但是在ie11下只有上下描邊顏色*\border-color:#008000\9\0;\*ie8-11 但是只是上下描邊顏色*\

border屬性的話‘\9’在ie6-11中是都能支援的，但是ie11對border-color的支援-只是上下有效

‘\9\0’是ie8-11都支援-只是ie11上下有效

2.在html中針對ie引用

注意：

a:只有ie下能使用，並且只有ie6-9支援，ie10/ie11是不支援的

b:只能在html中使用，不能在css中用

<!--[if IE]><!–- IE瀏覽器，調用css樣式表 -–><link rel="stylesheet" type="text/css" href="**.css" /><![endif]--><!--[if lte IE 6]><!–- 小於等於ie6,調用css樣式表 -–><link rel="stylesheet" type="text/css" href="**.css" /><![endif]-->

<!--[if !IE 8]><!–- 在非ie8下,調用css樣式表 -–><link rel="stylesheet" type="text/css" href="**.css" /><![endif]-->

其中<!--[if lte IE 6]>中的 lte 可以更換為下邊這幾個

lte小於或等於 lt小於或等於 gte大於或等於 gt大於 !不等於

3.css選取器@media

ie6 & ie7

@media screen\9{.div1{background:red;}}

@media \9screen{.div1{background:red;}}

ie8 & ie9 & ie10 & ie11

@media screen\0{.div1{background:red;}}

ie8

@media \0screen{.div1{background:red;}}

ie css hack

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ie css hack

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support