效果 soft 相對 padding 方式 高度 單獨 絕對定位 破壞

在chrome下，字體大小小於12px的文字，會按照12px來顯示。 解決辦法：以圖換字； 在IE6下，當高度小於19px的時候，高度會被當作19px來處理。（內容的高度） 解決辦法：給元素加overflow:hidden; 在IE6下，1px的點線邊框，會被顯示成虛線。 解決辦法：用背景圖代替； 在IE6下，如果元素中既包含文字，又包含inline-block類型的標簽，元素的行高會消失。 解決辦法：將文字單獨包起來，單獨設置行高； 在IE6，7下，給元素加邊框，非但不能阻止元素的內容margin向外傳遞，還會使子元素的margin消失。 解決辦法：觸發元素的haslayout； 在IE6下，不設置文檔聲明，瀏覽器就進入怪異盒模型解析。 可視寬=content+padding+border 怪異盒模型： 可視寬/高=width/height content=width/height-padding-border 標準盒模型： 可視寬/高=width/height+padding+border content=width/height 在IE8及之前的IE瀏覽器中，html5新增的標簽都不識別。 解決辦法：用JS； document.creatElement("標簽的名字"); 在文檔中創建一個標簽 註意：創建出來的標簽默認都是沒有display的，需要我們自己去設置display； 註意：在IE瀏覽器中，不支持main標簽，需要設置main的display屬性； IE7及IE7之前的IE瀏覽器，都不支持除了(l-v-h-a)之外的偽類。 解決辦法：用JS； IE6及IE6之前的IE瀏覽器，只支持給a標簽添加偽類。 IE6，7下，不允許把其他類型的元素設置為表格屬性。 在IE6，7下，不支持把塊標簽設置為inline-block類型。 在IE6，7下，塊元素有浮動和橫向的margin，橫向的margin值會被放大至兩倍。 解決辦法：轉成內嵌； margin-left 左側第一個元素有雙邊距 margin-right 右側第一個元素有雙邊距 在IE6，7下，一行元素的寬度之和 和 父級的寬度相差等於大於3px，最後一行的下margin失效。 解決辦法：無解（不要用下margin） 在IE6下，內容會撐開元素設置好的寬高。 一行元素記得都加浮動。 在IE6，7下，li裏的內容浮動了，但是li本身沒有添加浮動，li下邊會多出1個間隙。 解決辦法：1）給li加浮動（最好不要使用） 2）給li加垂直對齊方式 在IE6下，兩個浮動元素之間有註釋或者內嵌元素並且浮動元素的寬度和父級寬度相差小於3px，元素最後的文字會被復制。 解決辦法：用div把註釋和內嵌包起來 在IE6，7下，浮動元素的父級，有寬度的情況下，不需要清浮動。 在IE6，7中，沒有BFC； haslayout：當haslayout設置成true時，根據當前元素的父級或者元素自身的內容重新計算當前元素的寬高尺寸。 haslayout觸發條件： display:inline-block; height:（任何值除了auto） float；（left或right） positon:absolute; width:（任何值除了auto） writing-mode:tb-rl; zoom:（除normal外任意值） 縮放 （倍數） 在火狐瀏覽器下不支持zoom IE7還有一些額外的屬性（不完全列表）： min-height:（任意值） max-height:（除none外任意值） min-width:（任意值） max-width:（除none外任意值） overflow:（除visible外任意值） overflow-x:（除visible外任意值） overflow-y:（除visible外任意值） position:fixed; 在IE6下，浮動元素和絕對定位元素是並列關系，絕對定位元素會消失掉。 解決辦法：把定位元素單獨包起來； 在IE6，7下，元素有相對定位的話，父級的overflow對於這個元素不起效果。 解決辦法：給父級添加相對定位； 在IE6下，通過margin使元素移出父級的部分，會被父級截掉。 解決辦法：給元素添加相對定位； 在IE6下，定位父級的寬高是奇數的話，元素（絕對定位）的right和bottom值會有1px的偏差。 解決辦法：無 在IE6下，不支持固定定位（最大最小寬高） 解決辦法：用JS模擬； 在IE6，7下，不支持inherit這個屬性值。 在IE8及IE8之前的IE瀏覽器，不支持opacity。 解決辦法：用filter代替； filter:alpha(opacity=0-100) 在IE6，7下，輸入類型表單控件，上下各有1px的間隙。 解決辦法：給元素添加浮動； 在IE6下，表單控件設置border:none 無效。 解決辦法：1）border:0; 2）重置元素背景； 在IE6，7下，輸入類型表單控件添加背景圖，輸入文字的時候，背景會隨著元素一塊移動。 解決辦法：背景圖片加給父級； 圖片的格式： GIF：支持透明，不支持透明度 JPEG：不支持透明 PNG-24：支持透明，支持透明度 在IE6下，不支持PNG的透明。 解決辦法：1）用JS 2）_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/img.png",sizingMethod="crop"); <!--[if IE]> <![endif]--> 條件註釋語句IE9及IE9之前的IE瀏覽器支持； gt：greater than，選擇條件版本以上版本，不包含條件版本 lt：less than，選擇條件版本以下版本，不包含條件版本 gte：greater than or equal，選擇條件版本以上版本，包含條件版本 lte：less than or equal，選擇條件版本以下版本，包含條件版本 例：<!--[if gt IE6]> <h2>gt</h2> <![endif]--> css hack： \0 IE8-IE11 \9 IE6-IE10 *,+ IE7-IE6 _ IE6 註意：在IE6下，在important後邊緊跟一條一樣的樣式，會破壞掉important的作用，這樣就按照默認的優先級順序顯示。

瀏覽器的兼容性問題