?

最小字體
在chrome下，字體大小小于12px的文字，會按照12px來顯示。 解決辦法：以圖換字； 最小高度 在IE6下，當高度小于19px的時候，高度會被當作19px來處理。（內容的高度） 解決辦法：給元素加overflow:hidden; 1px的邊框問題 在IE6下，1px的點線邊框，會被顯示成虛線。 解決辦法：用背景圖代替； 行高 在IE6下，如果元素中既包含文字，又包含inline-block類型的標簽，元素的行高會消失。 解決辦法：將文字單獨包起來，單獨設置行高； margin問題 在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下，不允許把其他類型的元素設置為表格屬性。 inline-block兼容 在IE6，7下，不支持把塊標簽設置為inline-block類型。 雙邊距 在IE6，7下，塊元素有浮動和橫向的margin，橫向的margin值會被放大至兩倍。 解決辦法：轉成內嵌； margin-left ? ? 左側第一個元素有雙邊距 margin-right ? ? 右側第一個元素有雙邊距 margin失效 在IE6，7下，一行元素的寬度之和 和 父級的寬度相差等于大于3px，最后一行的下margin失效。 解決辦法：無解（不要用下margin） 溢出問題 在IE6下，內容會撐開元素設置好的寬高。 列表的間隙問題 在IE6，7下，li里的內容浮動了，但是li本身沒有添加浮動，li下邊會多出1個間隙。 解決辦法：1）給li加浮動（最好不要使用） 2）給li加垂直對齊方式 文字溢出BUG 在IE6下，兩個浮動元素之間有注釋或者內嵌元素并且浮動元素的寬度和父級寬度相差小于3px，元素最后的文字會被復制。 解決辦法：用div把注釋和內嵌包起來 haslayout 在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對于這個元素不起效果。 解決辦法：給父級添加相對定位； margin負值 在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下，輸入類型表單控件添加背景圖，輸入文字的時候，背景會隨著元素一塊移動。 解決辦法：背景圖片加給父級； PNG圖片的兼容 圖片的格式： GIF：支持透明，不支持透明度 JPEG：不支持透明 PNG-24：支持透明，支持透明度 在IE6下，不支持PNG的透明。 解決辦法：1）用JS 2）_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/img.png",sizingMethod="crop"); IE下條件注釋語句 <!--[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 important 注意：在IE6下，在important后邊緊跟一條一樣的樣式，會破壞掉important的作用，這樣就按照默認的優先級順序顯示。

轉載于:https://www.cnblogs.com/guoye/p/7565386.html

總結

以上是生活随笔為你收集整理的浏览器的兼容性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。