css常見CSS BUG收集

阿新 • • 發佈：2019-01-23

Hacking Rules:property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 為input新增width
2 body{overflow:hidden;}沒有去掉滾動條 IE6/7 bug | fixed 設定html{overflow:hidden;}
3 hasLayout的標籤擁有高度 IE6/7 bug | fixed *height:0;
_overflow:hidden;
4 form>[hasLayout]元素有margin-left時，子元素中的[input | textarea] 出現2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:寬度;}
form div{*margin-left:寬度÷2;}
5 當border-width有1條<邊3條時被設定成dotted時，1px的邊dotted顯示成dashed IE7 bug | fixed 不在同一個元素上使用不同寬度的 dotted
6 當子元素有position:relative的時候，父元素設定overflow:[hidden|auto]相當於給子元素設定了position:visible; IE6/7 bug | fixed 給父元素設定position:relative;
7 :hover偽類不能改變有position:absolute的子級元素的left/top值 IE7 bug | fixed 把top/left的值設定成除0%外的所有百分值；或新增一個margin-[所有方向]除0外的所有值，包括0%
8 :focus + selector {} 選擇器失效 IE8 bug | fixed 在失效選擇器後面新增一個空選擇器, :focus{}
9 列表中混亂的浮動：在list中浮動圖片時，圖片出現溢位正常位置；或沒有list-style IE8 bug | fixed 用背景圖片替換list-style
10 th 不會自動繼承上級元素的 text-align IE8 bug | fixed 給th新增text-align:inherit;
11 樣式(包括

link/style/@import(link)) 最多允許個為是：32 IE6-8 ─ 常識 99.99%的情況下，不會遇到
12 :hover 時若background-color為#fff, 失效 IE7 bug | fixed 把background-color改成background。或者，非#fff || #ffffff
13 忽略’>’後有註釋的選擇器：selector> /**/ selector{} IE7 bug | fixed 官方DEMO有誤
14 * html IE6 ─ HACK 只對IE6有效
15 PNG圖片中的顏色和背景顏色的值相同，但顯示不同 IE6-7 bug | fixed 利用 pngcrush 去除圖片中的 Gamma profiles
16 margin:0 auto; 不能讓block元素水平居中 IE6-8 bug | fixed 給block元素新增一個width
17 使用偽類 :first-line | :first-letter, 屬性的值中出現!important 會使屬性失效 IE8 bug | fixed !important is evil, don’t use it anymore
18 :first-letter 失效 IE6 bug | fixed 把 :first-letter 移到離{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}
19 Position:absolute元素中，a display:block, 在非:hover時只有文字可點選 IE6/7 bug | fixed 給a新增background, 如果背景透明，使用background:url(‘任何頁面中已經快取的檔案連結’)，不推薦background：url(#)[官方的解決方法]，因為會增加一下HTTP請求
20 float列表元素不水平對齊：li不設定float，a設定display:block;float:[方向]，li不水平對齊 IE6/7 bug | fixed 給li設定display:inline 或 float:[方向]
21 dt, dd, li 背景失效 IE6 bug | fixed dt, dd, li{position:relative;}
22 <noscript />元素的樣式在啟用javascript的情況下顯示了樣式 IE6-8 bug | fixed 利用js給<noscript />新增display:none;
23 使用filter處理的透明背景圖片的透明部分不可點 IE6-8 bug | fixed 把background:none變成background:url(‘連結’)，連結到本身和圖片之外的任何檔案
24 li內元素偏離 baseline 向下拉 IE8 bug | fixed 給li設定display:inline 或 float:[方向]
25 列表中li的list-style不顯示 IE6/7 bug | fixed 給li新增margin-left，留空間來顯示（不要加在ul上）
26 圖片不能垂直居中 IE6/7 bug/fixed 新增一個空標籤，並賦給”Layout”, 比如display:inline-block;
27 不能自定義指標樣式 IE6-8 bug | fixed 給指標檔案設定絕對路徑
28 背景溢位，拖動滾動條後顯示正常 IE6 bug | fixed 給父元素新增overflow:hidden防止溢位，並賦予hasLayout,如果新增_zoom:1;
29 高度超過height定義的高 IE6 bug/fixed 新增_overflow:hidden;(推薦)或者_font-size:0;
30 寬度超過width定義的寬 IE6 bug/fixed 新增_overflow:hidden;
31 雙倍邊距 IE6 ─ 常識新增display:inline到float元素中
32 margin負值隱藏：hasLayout的父元素內的非hasLayout元素，使用負邊距時，超出父元素部分不可見 IE6/7 bug/fixed 去掉父元素的hasLayout；或者賦hasLayout給子元素,並新增position:relative;
33 給兩個浮動元素的某中一個的文字設定為斜體，另一個元素下拉在有斜體文字元素的下面 IE6 bug/fixed 給有斜體文字的元素新增overflow:hidden;
35 3px 間隔：在float元素後的元素，會有3px間隔 IE6 bug/fixed 因為是確切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;
35 text-align 影響塊級元素 IE6/7 bug/fixed 整理你的float；或者分開設定text-align

css常見CSS BUG收集

css常見CSS BUG收集

css常見的bug及解決辦法

css常見bug

CSS - 移動端常見小bug整理與解決方法總結【更新中】

PC端頁面開發基礎-IE6常見CSS解析Bug及Hack

css：IE瀏覽器相容常見的bug

常見css bug解決

IE6中CSS常見BUG全集及解決方案

css兼容問題收集+部分效果收集+css重置

css常見屬性

css常見屬性和屬性值

CSS常見布局

IE8、7、6動態添加樣式時，CSS hack的BUG

HTML&CSS常見問題整理（五）

CSS常見布局解決方案

DIV+CSS常見佈局操作

css常見布局方式

CSS常見相容性問題及解決辦法彙總

CSS常見的基礎面試題合集

css常見屬性使用

css常見CSS BUG收集

相關推薦