日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

IE CSS Bug及解決方案參考手冊

云知道

當(dāng)然，還有性能問題 。不過，今天要說的是樣式的兼容問題 。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 這些瀏覽器的兼容，無不讓前端們頭痛 。而在這之中，最讓人頭痛的當(dāng)數(shù)IE，特別是IE6 。搞定了IE6，基本也就能稱霸半個江山了 。搞定了IE，也相當(dāng)于占領(lǐng)了7、80%的領(lǐng)地 。你想做一個統(tǒng)治頁面兼容的主么？反正我是想的 。
問題瀏覽器DEMO解決方法Hacking Rules:【IE CSS Bug及解決方案參考手冊】property:all-ie9; property:gte-ie8;*property:lte-ie7;property:ie7; _property:ie6;
1input[button | submit] 不能用 margin:0 auto; 居中IE8bug | fixed為input添加width2body{overflow:hidden;}沒有去掉滾動條IE6/7bug | fixed設(shè)置html{overflow:hidden;}3hasLayout的標(biāo)簽擁有高度IE6/7bug | fixed*height:0;
_overflow:hidden;4form[hasLayout]元素有margin-left時，子元素中的[input | textarea] 出現(xiàn)2margin-leftIE6/7bug | fixedform[hasLayout 元素]{margin-left:寬度;}
form div{*margin-left:寬度2;}5當(dāng)border-width有1條邊3條時被設(shè)置成dotted時，1px的邊dotted顯示成dashedIE7bug | fixed不在同一個元素上使用不同寬度的 dotted6當(dāng)子元素有position:relative的時候，父元素設(shè)置overflow:[hidden|auto]相當(dāng)于給子元素設(shè)置了position:visible;IE6/7bug | fixed給父元素設(shè)置position:relative;7:hover偽類不能改變有position:absolute的子級元素的left/top值IE7bug | fixed把top/left的值設(shè)置成除0%外的所有百分值；或添加一個margin-[所有方向]除0外的所有值，包括0%8:focusselector {} 選擇器失效IE8bug | fixed在失效選擇器后面添加一個空選擇器, :focus{}9列表中混亂的浮動：在list中浮動圖片時，圖片出現(xiàn)溢出正常位置；或沒有l(wèi)ist-styleIE8bug | fixed用背景圖片替換list-style10th 不會自動繼承上級元素的 text-alignIE8bug | fixed給th添加text-align:inherit;11樣式(包括link/style/@import(link)) 最多允許個為是：32IE6-8─ 常識99.99%的情況下，不會遇到12:hover 時若background-color為#fff, 失效IE7bug | fixed把background-color改成background 。或者，非#fff || #ffffff13忽略后有注釋的選擇器：selector /**/ selector{}IE7bug | fixed官方DEMO有誤14* htmlIE6─ HACK只對IE6有效15PNG圖片中的顏色和背景顏色的值相同，但顯示不同IE6-7bug | fixed利用 pngcrush 去除圖片中的 Gamma profiles16margin:0 auto; 不能讓block元素水平居中IE6-8bug | fixed給block元素添加一個width17使用偽類 :first-line | :first-letter, 屬性的值中出現(xiàn)!important 會使屬性失效IE8bug | fixed!important is evil, dont use it anymore18:first-letter 失效IE6bug | fixed把 :first-letter 移到離{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}19Position:absolute元素中，a display:block, 在非:hover時只有文本可點擊IE6/7bug | fixed給a添加background, 如果背景透明，使用background:url(任何頁面中已經(jīng)緩存的文件鏈接)，不推薦background：url(#)[官方的解決方法]，因為會增加一下HTTP請求20float列表元素不水平對齊：li不設(shè)置float，a設(shè)置display:block;float:[方向]，li不水平對齊IE6/7bug | fixed給li設(shè)置display:inline 或 float:[方向]21dt, dd, li 背景失效IE6bug | fixeddt, dd, li{position:relative;}22noscript /元素的樣式在啟用javascript的情況下顯示了樣式IE6-8bug | fixed利用js給noscript /添加display:none;23使用filter處理的透明背景圖片的透明部分不可點IE6-8bug | fixed把background:none變成background:url(鏈接)，鏈接到本身和圖片之外的任何文件24li內(nèi)元素偏離 baseline 向下拉IE8bug | fixed給li設(shè)置display:inline 或 float:[方向]25列表中l(wèi)i的list-style不顯示IE6/7bug | fixed給li添加margin-left，留空間來顯示（不要加在ul上）26圖片不能垂直居中IE6/7bug/fixed添加一個空標(biāo)簽，并賦給Layout, 比如display:inline-block;27不能自定義指針樣式IE6-8bug | fixed給指針文件設(shè)置絕對路徑28背景溢出，拖動滾動條后顯示正常IE6bug | fixed給父元素添加overflow:hidden防止溢出，并賦予hasLayout,如果添加_zoom:1;29高度超過height定義的高IE6bug/fixed添加_overflow:hidden;(推薦)或者_(dá)font-size:0;30寬度超過width定義的寬IE6bug/fixed添加_overflow:hidden;31雙倍邊距IE6─ 常識添加display:inline到float元素中32margin負(fù)值隱藏：hasLayout的父元素內(nèi)的非hasLayout元素，使用負(fù)邊距時，超出父元素部分不可見IE6/7bug/fixed去掉父元素的hasLayout；或者賦hasLayout給子元素,并添加position:relative;33給兩個浮動元素的某中一個的文字設(shè)定為斜體，另一個元素下拉在有斜體文字元素的下面IE6bug/fixed給有斜體文字的元素添加overflow:hidden;353px 間隔：在float元素后的元素，會有3px間隔IE6bug/fixed因為是確切的3px，所以，用暴力破解吧，比如_margin-left:-3px;35text-align 影響塊級元素IE6/7bug/fixed整理你的float；或者分開設(shè)置text-align

推薦閱讀