前言
jQuery的屬性support是判斷瀏覽器之間是否兼容的模塊，該模塊包含了leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute….等兼容問題，所有的這些屬性也只是jQuery內部會用到，因為jQ內部一些模塊需要對這些東西進行判斷， 就直接寫成了一個support模塊， 可以供我們， 但是我們寫代碼的時基本都沒用到啊，
今天再把這些玩意兒過一下， 測試的瀏覽器為FF，CHROME，IE11， IE6-IE10是用IE11模擬的：
$.support.leadingWhitespace ―――― IE中自動去空格
$.support.checkOn ―-chrome中radio默認值為checkOn
$.support.tbody ―-IE通過innerHTML自動生成tbody
$.support.htmlSerialize ― 標準瀏覽器會自動生成link標籤
$.support.style ―-IE67中getAttriute會獲取各種類型的數據….
$.support.opacity ―- IE678不支持opacity
$.support.cssFloat ―-cssFloat標準瀏覽器支持的，IE要用styleFloat
$.support.optSelected ―瀏覽器並不會設置默認的option
$.support.getSetAttribute ―-getSetAttribute在瀏覽器之間的兼容
$.support.html5Clone ―- 複製標籤的問題
$.support.boxModel ―- 是否支持盒模型
$.support.submitBubbles ―-冒泡
$.support.changeBubbles ―-冒泡
$.support.focusinBubbles ―-冒泡
$.support.deleteExpando ―IE的DOM元素是COM組件， 不能delete組件的屬性
$.support.noCloneEvent ―-複製元素的事件
$.support.reliableHiddenOffsets ―-table元素中tr內td的問題；
$.support.boxSizing ―是否支持boxSizing
$.support.doesNotIncludeMarginInBodyOffset ―-body不會包含margin的問題（算不算問題呢？）
$.support.pixelPosition ―-獲取樣式返回的是否是像素值
$.support.boxSizingReliable ―-boxSizing是否可用
$.support.reliableMarginRight ―-chrome中margin的bug
$.support.inlineBlockNeedsLayout ―-IE中layout的問題
$.support.shrinkWrapBlocks ―-IE6中自動擴大寬高的問題
$.support.leadingWhitespace屬性
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> IE678中自動過濾了元素前後的空格, 而且空格不包含在childNodes裡面, <script type="text/javascript"> var el = document.createElement("div"); el.innerHTML = " <div id=/"null/"> </div> "; l(el.childNodes.length); </script> </body></html>標準瀏覽器中是遵守用戶輸入， el應該包含三個節點：["", "<div id=/"null/"> </div>", ""]節點;
IE678中卻只有1個節點， 這個節點就是那個DIV:
$.support.checkOn屬性
標準瀏覽器中的checkbox默認value為”on”, IE5678也都是”on”, 但是在某些webkit中checkbox的值默認為”"字符串，現在的瀏覽器版本都很高了， 基本沒有這個問題, 如果你有chrome低版本的話可以用下面這個demo測試看看有沒有問題：
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <input id="ck" type='checkbox'/> <script type="text/javascript"> var el = document.getElementById("ck"); //標準瀏覽器有change事件; el.onchange = function() { l(el.value); l(ck.checked) } //IE中的萬能事件propertychange; el.onpropertychange = function() { l(el.value); l(ck.checked) } l(el.value); </script> </body></html>$.support.tbody屬性
在IE6和IE7中新建table會自動創建tbody元素;
如果我們為創建的table添加tr或者添加td， 那麼所有的瀏覽器都會自動創建tbody;
如果是動態創建的table和tr，把tr添加到tbody中，那麼tbod根本不會出來， 所有瀏覽器都遵循開發者的操作(瀏覽器的心思真的不好猜測啊)
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <div id="tb"></div> <div id="tb2"></div> <div id="tb3"></div> <script type="text/javascript"> var el = document.getElementById("tb"); el.innerHTML = "<table></table>" //IE67中會輸出1， 標準瀏覽器遵循用戶輸入，不會是自動生成tbody，所以tobdy的length是0 l(el.getElementsByTagName("tbody").length); </script> <script> var el = document.getElementById("tb2"); el.innerHTML="<table><tr>111</tr></table>"; //無論是標準還是IE67都會自動生成tbody標籤l(el.getElementsByTagName("tbody").length); </script> <script> var el = document.getElementById("tb3"); el.innerHTML="<table><td>111</td></table>"; //無論是標準還是IE67都會自動生成tbody標籤l(el.getElementsByTagName("tbody").length); </script> <script> var tb = document.createElement("table"); var tr = document.createElement("tr"); tr.innerHTML = "trtrtr"; tb.appendChild(tr); document.getElementsByTagName("body")[0].appendChild(tb); </script> </body></html>代碼執行完畢以後你會看到， 當table裡沒有元素的時候， chrome沒有自動產生tbody， 如果你不按照正常的寫法寫table， 而是這樣
"<table><tr>111</tr></table>";
產生的HTML變成這樣” 111<table><tr></tr></table>“，在jQ中你這樣寫$(“<table><tr>111</tr></table>”)，生成的HTML也是這樣的["111","<table><tr></tr></table>"]，所以再三強調寫html標籤的嵌套要符合標準….
在IE中又是例外一回事，通過innerHTML的方式會自動添加tbody ， 而且你標籤嵌套錯了他也不管你，通過appendChild的方式跟其他瀏覽器一樣不會主動生成tbody；
$.support.htmlSerialize
IE678瀏覽器中不能夠通過innerHTML動態生成link標籤， 要通過新建標籤的形式創建：
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <div> bounce </div> <div id="link"></div> <script type="text/javascript"> var eLink = document.getElementById("link"); eLink.innerHTML = '<link href="http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel="stylesheet">'; </script> </body></html>雖然link標籤多數都可以通過innerHTML生成， 但是我們要通過innerHTML生成script標籤是不可行的：
1 2下一頁閱讀全文