從html,css,javascript三方面談談「瀏覽器兼容性」的問題

時間 2019-12-12

標籤 html css javascript 三方面談談瀏覽器兼容性問題欄目 HTML 简体版

原文原文鏈接

javaScript

在IE、FireFox、Netscape等不一樣的瀏覽器裏，對於document.body的clientHeight、offsetHeight 和 scrollHeight 有着不一樣的含義.
clientHeight：在上述瀏覽器中, clientHeight 的含義是一致的，定義爲網頁內容可視區域的高度，即在瀏覽器中能夠看到網頁內容的高度，一般是工具條如下到狀態欄以上的整個區域高度，與具體的網頁頁面內容無關。能夠理解爲，在屏幕上經過瀏覽器窗口所能看到網頁內容的高度。
offsetHeight：關於offsetHeight，ie和firefox等不一樣瀏覽中意義有所不一樣，須要加以區別。在ie中，offsetHeight 的取值爲 clientHeight加上滾動條及邊框的高度；而firefox、netscape中，其取值爲是實際網頁內容的高度，可能會小於clientHeight。
scrollHeight：scrollHeight都表示瀏覽器中網頁內容的高度，但稍有區別。在ie裏爲實際網頁內容的高度，能夠小於 clientHeight；在firefox 中爲網頁內容高度，最小值等於 clientHeight，即網頁實際內容比clientHeight時，取clientHeight。

　 clientWidth、offsetWidth 和 scrollWidth 的含義與上述內容雷同，不過是高度變成寬度而已。javascript

標準的事件綁定方法函數爲addEventListener，但IE下是attachEvent
事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，可是最後的結果是將IE的標準定爲標準
咱們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。而且獲取目標元素的方法也不一樣，標準瀏覽器是event.target，而IE下是event.srcElement
在低版本的IE中獲取的日期處理函數的值不是與1900的差值，可是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值
好比：var year= new Date().getYear();
解決
//方式一
var year= new Date().getYear();
year = (year<1900?(1900+year):year);
document.write(year);
//方式二
var year = new Date().getFullYear();
document.write(year);
innerText的使用
分析緣由:FF不支持innerText，它支持textContent來實現innerText，不過textContent沒有像innerText同樣考慮元素的 display方式，因此不徹底與IE兼容。若是不用textContent，字符串裏面不包含HTML代碼也能夠用innerHTML代替。Safari和Chrome對innerText和textContent都支持
兼容處理
經過判斷不一樣瀏覽器作不一樣的處理
if(document.all){css
```
document.getElementById('element').innerText = "mytext";
```
} else{html
```
document.getElementById('element').textContent = "mytext";
```
}前端
Frame的引用
IE能夠經過id或者name訪問這個frame對應的window對象；而FF只能夠經過name來訪問這個frame對應的window對象。
【應用場景】
在一個頁面嵌套了一個iframe頁面(下面簡稱父頁面和子頁面)。父頁面取子頁面的值。
Js代碼
<iframe id="frame_id" src="frametest.jsp" width="100%" height="100%" title="你好世界">
此時若是父頁面想獲取子頁面例如div中的顯示值，IE下能夠這樣寫：
var obj = window.top.frame_id.document.getElementById(div_id);
alert(obj.innerText);
可是在FF中卻沒法取子頁面中的值，緣由就是FF只支持window.top.frameName來訪問子頁面中的window對象。因此在IE、safari中是支持經過frameName或是frameId來訪問子頁面window對象的。
解決方法：
一、儘可能都是用frameName去訪問子頁面window對象。
二、在FF、IE、Safari中都支持window.document.getElementById(frameId)來得到子頁面window對象。
ajax的實現方式不一樣，這個我所理解的是獲取XMLHttpRequest的不一樣，IE下是activeXObject
IE中不能操做tr的innerHtml
得到DOM節點的父節點、子節點的方式不一樣
其餘瀏覽器：parentNode parentNode.childNodes
IE：parentElement parentElement.children

鍵盤事件 keyCode 兼容性寫法html5

var inp = document.getElementById('inp')
   var result = document.getElementById('result')
   
   function getKeyCode(e) {
     e = e ? e : (window.event ? window.event : "")
     return e.keyCode ? e.keyCode : e.which
   }
   
   inp.onkeypress = function(e) {
     result.innerHTML = getKeyCode(e)
   }

求窗口大小的兼容寫法
// 瀏覽器窗口可視區域大小（不包括工具欄和滾動條等邊線）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
// 網頁內容實際寬高（包括工具欄和滾動條等邊線）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;java

// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;node

// 滾動的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;web

DOM 事件處理程序的兼容寫法（能力檢測）
var eventshiv = {
// event兼容
getEvent: function(event) {ajax

return event ? event : window.event;
},

// type兼容
getType: function(event) {chrome

return event.type;
},

// target兼容
getTarget: function(event) {

return event.target ? event.target : event.srcelem;
},

// 添加事件句柄
addHandler: function(elem, type, listener) {

if (elem.addEventListener) {
       elem.addEventListener(type, listener, false);
   } else if (elem.attachEvent) {
       elem.attachEvent('on' + type, listener);
   } else {
       // 在這裏因爲.與'on'字符串不能連接，只能用 []
       elem['on' + type] = listener;
   }
   },

// 移除事件句柄
removeHandler: function(elem, type, listener) {

if (elem.removeEventListener) {
       elem.removeEventListener(type, listener, false);
   } else if (elem.detachEvent) {
       elem.detachEvent('on' + type, listener);
   } else {
       elem['on' + type] = null;
   }
   },

// 添加事件代理
addAgent: function (elem, type, agent, listener) {

elem.addEventListener(type, function (e) {
       if (e.target.matches(agent)) {
           listener.call(e.target, e); // this 指向 e.target
       }
   });
   },

// 取消默認行爲
preventDefault: function(event) {

if (event.preventDefault) {
       event.preventDefault();
   } else {
       event.returnValue = false;
   }
   },

// 阻止事件冒泡
stopPropagation: function(event) {

if (event.stopPropagation) {
       event.stopPropagation();
   } else {
       event.cancelBubble = true;
   }
 }

};

集合類對象的()與[]的問題
IE下，可使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。
Js代碼：
document.write(document.forms("formName").src);
//該寫法在IE下能訪問到Form對象的src屬性
解決辦法：將document.forms("formName")改成 document.forms["formName"]。統一使用[]獲取集合類對象。
對瀏覽器Native組件調用屬性、方法大小寫問題
IE：不區分大小寫
FF、Chrome：區分大小寫
如：Ajax返回的response對象，IE支持response.responseXml和responseXML；FF等瀏覽器支持response.responseXML，解決辦
法只有在編寫程序時儘可能避免不兼容的寫法

HTML

解決 ie9 如下瀏覽器對 html5 新增標籤不識別的問題
html5shiv.js

解決 ie9 如下瀏覽器不支持 CSS3 Media Query 的問題。
respond.js
<script src="https://cdn.bootcss.com/respo...;></script>

picturefill.js
解決 IE 9 10 11 等瀏覽器不支持 <picture> 標籤的問題
<script src="https://cdn.bootcss.com/pictu...;></script>

高版本的瀏覽器用了低版本的瀏覽器沒法識別的元素，從而致使不能解析。這點主要體如今html5的新標籤上
htmlshim框架可讓低於IE9的瀏覽器支持html5
img的alt屬性，在圖片不存在的狀況下，各瀏覽器的解析不一致
在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字
ul標籤內外邊距問題
ul標籤在IE6IE7中，有個默認的外邊距，可是在IE8以上及其餘瀏覽器中有個默認的內邊距
<div id="test">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
IE的打印結果，有3個子節點，而且都爲P元素；非IE則表現出極大的差別：竟然打印出了7個子節點，固然也包括3個P元素子節點在內，除此以外還多了4個nodeType=3的子節點
改寫爲：
<div id="test"><p>文字</p><p>文字</p><p>文字</p></div>

CSS

css重置不一樣瀏覽器的基礎樣式文件 Normalize.css

不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣
*{margin:0;padding:0;}
css的hack問題：主要針對IE的不一樣版本，不一樣的瀏覽器的寫法不一樣
IE的條件註釋hack：
塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示 margin比設置的大，IE6中後面的一塊被頂到下一行
在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。
行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug,IE6裏的間距比超過設置的間距
在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe
設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度
問題：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度
給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度
備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。
圖片默認有間距
使用float屬性爲img佈局
備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距
IE6下圖片的下方有空隙
給img設置display:block;
IE6下兩個float之間會有個3px的bug
給右邊的元素也設置float:left;
IE6下沒有min-width的概念，其默認的width就是min-width
min-height: 350px;
_height: 350px;
標籤最低高度設置min-height不兼容
若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。
IE6下在使用margin:0 auto;沒法使其居中
爲其父容器設置text-align:center;
被點擊事後的超連接再也不具備hover和active屬性
按lvha的順序書寫css樣式
link:日常的狀態
visited:被訪問過以後
hover:鼠標放到連接上的時候
active:連接被按下的時候
在使用絕對定位或者相對定位後，IE中設置z-index失效，緣由是由於其元素依賴於父元素的z-index，可是父元素默認爲0，子高父低，因此不會改變顯示的順序
IE6下沒法設置1px的行高，緣由是由其默認行高引發的
爲期設置overflow:hidden;或者line-height:1px;
瀏覽器 CSS 兼容前綴
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 統一標識語句
完美解決 Placeholder
<input type="text" value="Name " onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name ';}">
清除浮動最佳實踐
.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }
解決邊距重疊問題
當相鄰元素都設置了 margin 邊距時，margin 將取最大值，捨棄小值。爲了避免讓邊距重疊，能夠給子元素加一個父元素，並設置該父元素爲
overflow: hidden;
<div class="box" id="box">
```
<p>Lorem ipsum dolor sit.</p>
 <div style="overflow: hidden;">
   <p>Lorem ipsum dolor sit.</p>
 </div>
 <p>Lorem ipsum dolor sit.</p>
 </div>
```
IE9 如下瀏覽器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

解決 IE6 不支持 fixed 絕對定位以及IE6下被絕對定位的元素在滾動的時候會閃動的問題

/* IE6 hack */

html, html body {

background-image: url(about:blank);
 background-attachment: fixed;

}
*html #menu {

position: absolute;
 top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');

}

IE6 背景閃爍的問題
連接、按鈕用 CSSsprites 做爲背景，在 ie6 下會有背景圖閃爍的現象。緣由是 IE6 沒有將背景圖緩存，每次觸發 hover 的時候都會從新加載
能夠用 JavaScript 設置 ie6 緩存這些圖片
document.execCommand("BackgroundImageCache", false, true);
解決在 IE6 下，列表與日期錯位的問題
日期<span> 標籤放在標題標籤以前便可
IE 條件註釋
IE 的條件註釋僅僅針對IE瀏覽器，對其餘瀏覽器無效
IE 屬性過濾器（較爲經常使用的hack方法）
針對不一樣的 IE 瀏覽器，可使用不一樣的字符來對特定的版本的 IE 瀏覽器進行樣式控制
讓 IE7 IE8 支持 CSS3 background-size屬性
因爲 background-size 是 CSS3 新增的屬性，因此 IE 低版本天然就不支持了，可是老外寫了一個 htc 文件，名叫 background-size polyfill，使用該文件可以讓 IE七、IE8 支持 background-size 屬性。其原理是建立一個 img 元素插入到容器中，並從新計算寬度、高度、left、top 等值，模擬 background-size 的效果。
```
html {
     height: 100%;
   }
   body {
     height: 100%;
     margin: 0;
     padding: 0;
     background-image: url('img/37.png');
     background-repeat: no-repeat;
     background-size: cover;
     -ms-behavior: url('css/backgroundsize.min.htc');
     behavior: url('css/backgroundsize.min.htc');
   }
```
IE6-7 line-height 失效的問題
問題：在ie 中 img 與文字放一塊兒時，line-height 不起做用
解決：都設置成 float加粗文字
width:100%
width:100% 這個東西在 ie 裏用很方便，會向上逐層搜索 width 值，忽視浮動層的影響.
Firefox 下搜索至浮動層結束，如此，只能給中間的全部浮動層加 width:100%才行，累啊。
opera 這點倒學乖了，跟了 ie
cursor:hand
顯示手型 cursor: hand，ie6/7/八、opera 都支持，可是safari 、 ff 不支持
cursor: pointer;
td 自動換行的問題
問題：table 寬度固定，td 自動換行
解決：設置 Table 爲 table-layout: fixed，td 爲 word-wrap: break-word
讓層顯示在 FLASH 之上想讓層的內容顯示在 flash 上，把 FLASH 設置透明便可一、<param name=" wmode " value="transparent" /> 二、<param name="wmode" value="opaque"/>