前端兼容性問題總結

時間 2019-11-08

標籤前端兼容性問題總結简体版

原文原文鏈接

##HTML 篇javascript

#####樣式兼容性問題css

<!-- IE 按 Edge 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- IE 8 9 10 按 IE7 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />
複製代碼

#####怪異模式html

怪異模式是沒有遵照 W3C 規範的一種兼容模式，其中的 width 是包括 contentWidth, 左右padding, 左右border 在內的所有範圍(height 也同樣)，相似於 box-sizing: border-box;，並且 table 的 font-size 不能從父元素繼承。如下狀況會觸發瀏覽器怪異模式(Quirks Mode):java

沒寫 DOCTYPE 觸發怪異模式
在前加, IE6 下會觸發怪異模式
在前加入, IE7進入怪異模式
前有任何非空字符，會在IE6 下會觸發怪異模式
前有 XML ，在IE7 下不會觸發怪異模式，但不能有其餘非空字符

檢查document.compatMode,能夠查看瀏覽器工做在哪一個模式：值BackCompat爲怪異模式，值CSS1Compat爲標準模式css3

#####display:inline-block 元素間有間隙web

<!-- 如下的 li 元素是 display: inline; 類型的 -->
<!-- 這樣寫元素之間有間隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 換個寫法解決問題-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>
複製代碼

#####IE可能出現的文檔樣式短暫失效問題chrome

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 可能的script部分 -->
    <script type="text/javascript"></script>   <!-- 關鍵：添加一個空標籤 -->
    <!-- link部分 -->
</head>
複製代碼

##css 篇瀏覽器

#####雙倍間距問題bash

/*一下代碼在 IE6 中會出現雙倍間距*/
#box{
  float: left;
  margin: 10px;
}

//解決方法
#box{
  float: left;
  margin: 10px;
  display: inline;
}
複製代碼

#####錯位問題app

/*IE6中，這樣的多個盒子並列時會發生向下偏移，應該對偏移的盒子添加負 margin-top 進行修正*/
.box{
  float: left;
}
複製代碼

#####E6 奇數寬高問題

IE6 中盒子的寬(width) 和高(height)設置爲奇數時會有 bug，儘可能設置爲偶數便可。

#####IE6 Peekaboo Bug

一個 div#top 中加入一個 div#float 向左浮動，而後加入一個或多個 div, 直到清除浮動爲止：

<style>
#top{
    border: dotted 2px black;
    background: #eee; /*top有背景*/
}
#float{
    height: 196px;
    width: 196px;
    border: 2px solid red;
}
.border{
    border: 2px solid green;
}
.clear{
    clear: both;
    border: 2px solid blue;
}
</style>
<body>
    <div id="top">
        <div id="float">float div</div>
        <!-- 這如下在 IE6 中不能正常顯示 -->
        <div class="border">inside-div text!</div>
        <div class="border">inside-div text!</div>
        <!-- 這以上在 IE6 中不能正常顯示 -->
        <div class="clear">clear div</div>
    </div>
</body>
複製代碼

解決方法，給 #top 一個 height 或 width ：

#top{
    height: 300px;
}
複製代碼

#####盒子坍塌

這個問題比較廣泛，在盒內層元素設置外邊距時會發生

/*發生盒子坍塌*/
#box{
  height: 300px;
}
#box .inner-box{
  margin:20px;
}

/*修正*/
#box{
  height: 300px;
  margin-top: -20px;
}
#box .inner-box{
  margin:20px;
}
複製代碼

#####文字大小

字體大小在不一樣瀏覽上不一致。例如font-size:14px，在 IE 中的實際行高是16px，下面有3px留白；在 Firefox 中的實際行高是17px，下面有3px留白，上邊1px留白；在 opera 中就更不同了。解決方式統一指定行高 line-height

html{
  font-size: 14px;
  line-height: 14px;
}
複製代碼

另外，咱們會遇到 font-size:62.5% 這樣的定義，爲了把默認的 16px 映射爲 10px, 這樣1em = 10px 更利於計算。

#####去除元素默認邊距

有不少元素默認帶有邊距，對咱們排版很不利。但利用通配符*去除邊距存在性能問題，因此用下面語句清除默認邊距

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
  margin: 0;
  padding: 0;
}
複製代碼

#####低版本 IE 高度限定失效

通常的元素指定高度屬性 height 能夠固定該元素高度，但在低版本 IE 中沒法固定元素高度，該元素高度依然會被內容撐開，須要注意。(寬度也同樣)

#####IE6 不支持 png 透明效果

解決方式用濾鏡

#box{
  _background: none;
  filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src='路徑');
}
複製代碼

#####Firefox 的寬度問題

Firefox瀏覽器會的 body 比其餘瀏覽器的 body 寬度小1個像素，注意設置其子元素（尤爲 float 元素大小，防止排版混亂。

#####IE6中的吞吃問題

IE6 中爲上下2個 div 中的上一個地址設置背景時，下一個 div 也會帶有背景。相似的還有 overflow:scroll 時，出現的滾動條不完整。應該分別對在上方的 div 和滾動條不完整的 div 加 zoom: 1樣式。

#####IE6 圖片格式問題

IE6 中的圖片默認存在邊框，應統一去除。同時圖片下方會有空隙，用 font-size解決

img{
  border: none;
  font-size: 0;
}
複製代碼

#####IE中沒法定義1px高度這樣的小盒子

IE6 中的空元素高度不能低於19px，解決方式有四種：

一、在元素中插入空註釋二、在元素中插入空格三、加入 css: overflow:hidden; 四、加入 css: font-size: 0;

#####IE6 z-index 失效

當父元素已設置 z-index 屬性後，子元素的 z-index 會失效。

#####IE6中 select 始終高於 div

浮層 div 出現時隱藏 select，浮層 div 消失時再顯示 select。

#####讓 chrome 支持小於 12px 的字體

#box{
  font-size: 8px;
  -webkit-text-size-adjust: none;
}
/* 可是，上面這個方法 chrome27 之後就不能用了。但咱們能夠用 css3 解決這個問題 */
#box{
  font-size: 12px;
  -webkit-transform: scale(0.75);
}
複製代碼

#####CSS Hack

兼容性屬性設置，注意書寫順序：優先寫高等級瀏覽器支持方式、優先寫支持瀏覽器多的方式

/*以 color 屬性爲例，注意書寫順序*/
#box{
  color: #f00; //全部瀏覽器都支持
  color: #0f0 !important; //只有 IE6 無效
  color: #00f\9; //全部 IE 都有效
  color: #ff0\0; //IE8+ 有效
  color: #f0f\9\0; //IE9+ 有效
  *color: #fff; //僅 IE6, IE7 有效
  #color: #0ff; //僅 IE6, IE7 有效
  +color: #800; //僅 IE6, IE7 有效
  -color: #008; //只有 IE6 有效
  _color: #080; //只有 IE6 有效
}
複製代碼

因爲後定義的屬性覆蓋先定義的屬性，全部上面設置最後的效果爲：

IE6 爲 #080 IE7 爲 #800 IE8 爲 #ff0 IE9,10 爲 #0f0 其餘爲 #f00

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。