머리말
JQuery의 속성 지원은 브라우저와 호환되는지 여부를 결정하는 모듈입니다. 이 모듈은 WhiteSpace, TBody, HtmlSerialize, Style, Hrefnormalized, 불투명, CSSFloat, 체크본, 점검, OptSelected, GetSetAttribute 등의 호환성 문제가 포함되어 있습니다. 이러한 모든 속성은 JQUERY 내에서만 사용됩니다. JQ 내의 일부 모듈은 이러한 것들을 판단해야하기 때문에 직접 사용되지 않았기 때문에 우리가 우리를 위해 사용될 수 없었기 때문입니다. 코드.
오늘 나는 이런 것들을 검토 할 것입니다. 테스트 된 브라우저는 FF, Chrome, IE11 및 IE6-IE10입니다. IE11을 사용하여 시뮬레이션됩니다.
$ .support.leadingwhitespace --- 자동으로 공백을 제거하십시오
$ .support.checkon —-- 크롬에서 라디오의 기본값은 Checkon입니다.
$ .support.tbody —- INNERHTML을 통해 자동으로 tbody를 생성합니다
$ .support.htmlserialize - 표준 브라우저는 링크 태그를 자동으로 생성합니다.
$ .support.Style — -IE67 GetAttriute는 다양한 유형의 데이터를 얻을 것입니다 ....
$ .support.opacity —- IE678은 불투명도를 지원하지 않습니다
$ .support.cssfloat —-- CSSFloat의 표준 브라우저에서 지원하는 경우, IE는 StyleFloat를 사용해야합니다.
$ .support.optselected - 브라우저는 기본 옵션을 설정하지 않습니다
$ .support.getSetAttribute —- 브라우저 간의 getSetAttribute 호환성
$ .Support.html5clone --- 복사 태그 문제
$ .support.boxModel- 박스 모델을 지원할지 여부
$ .support.submitBubbles —Bubble
$ .support.changeBubbles-- 버블
$ .support.focusinBubbles —Bubble
$ .support.deleteexpando —IE의 DOM 요소는 COM 구성 요소이며 구성 요소의 속성을 삭제할 수 없습니다.
$ .support.nocloneevent- 요소를 복사하는 이벤트
$ .support.ReliableHiddenOffsets- 테이블 요소에서 TR에서 TD의 문제;
$ .support.boxsizing- 박스 조정이 지원되는지 여부
$ .support.doesnotincludemargininbodyOffset —-Body는 마진을 포함하지 않습니다 (문제입니까?)
$ .support.pixelPosition- 스타일로 반환 된 픽셀 값을 가져옵니다.
$ .support.boxsizingReliable —- IS Boxsizing 사용 가능
$ .support.reliablemarginright-- 크롬의 마진 버그
$ .support.inlineBlockneedSlayout --- 즉, 레이아웃 문제
$ .support.shrinkWrapBlocks --- IE6의 너비와 높이를 자동으로 확장하는 문제
$ .support.leadingwhitespace 속성
<html> <head> <meta charset = "utf-8"/> <title> 호환 </title> </head> <bod> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ( "div"), index = 0; el.style.csstext = "10px; 고정; 상단 : 0; 폭 : 10%; 국경 : 1px solid #f00;" IE의 CreateLement는 IF를 포함합니다. </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 속성
표준 브라우저에서 확인란의 기본값은 "ON" 이고 IE5678 은 "ON"이지만 일부 WebKits에서는 ""String 으로의 CheckBox 기본값이 매우 높고 현재 브라우저 버전이 매우 높기 때문에 기본적으로 문제가 없습니다. 크롬 버전이 낮은 경우 다음 데모를 사용하여 문제가 있는지 테스트 할 수 있습니다.
<html> <head> <meta charset = "utf-8"/> <title> 호환 </title> </head> <bod> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ( "div"), index = 0; el.style.csstext = "PADDING; POSITION : TOP : 0; 오른쪽 : 0; 19%; RETURN #F00;"; }; </script> <input id = "ck"type = 'checkbox'/> <script type = "text/javaScript"> var el = document.getElementById ( "ck"); // 표준 브라우저에는 변경 이벤트가 있습니다. el.onchange = function () {l (el.value); l (ck.checked)} // IE의 Universal Event PropertyChange; el.onpropertyChange = function () {l (el.Value); l (ck.checked)} l (el.value); </script> </body> </html>$ .support.tbody 속성
IE6에서 새 테이블을 생성하고 IE7은 자동으로 tbody 요소를 만듭니다.
생성 된 테이블에 TR 또는 TD를 추가하면 모든 브라우저가 자동으로 TBody를 만듭니다.
동적으로 생성 된 테이블과 tr이고 tr을 tbody에 추가하면 tbod가 전혀 나오지 않습니다. 모든 브라우저는 개발자의 운영을 따릅니다 (브라우저의 마음은 정말 추측하기 어렵습니다)
<html> <head> <meta charset = "utf-8"/> <title> 호환 </title> </head> <bod> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ( "div"), index = 0; el.style.csstext = "PADDING; POSITION : TOP : 0; 오른쪽 : 0; 19%; RETURN #F00;"; }; </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를 생성하지 않으므로 토브의 길이는 0 l입니다 (el.getElementsBytagName ( "tbody"). 길이); </script> <cript> var el = document.getElementById ( "tb2"); el.innerhtml = "<table> <tr> 111 </tr> </table>"; // 표준이든 IE67이 자동으로 tbody tag l (el.getElementsByTagName ( "tbody"). length)를 자동으로 생성합니다. </script> <cript> var el = document.getElementById ( "tb3"); el.innerhtml = "<table> <td> 111 </td> </table>"; // 표준이든 IE67이 자동으로 tbody tag l (el.getElementsByTagName ( "tbody"). length)를 자동으로 생성합니다. </script> <cript> var tb = document.createElement ( "테이블"); var tr = document.createelement ( "tr"); tr.innerhtml = "trrtrtr"; TB. AppendChild (TR); document.getElementsByTagName ( "body") [0] .AppendChild (tb); </script> </body> </html>코드가 실행되면 테이블에 요소가 없으면 Chrome이 자동으로 TBody를 생성하지 않음을 알 수 있습니다. 정상적인 글쓰기 방법에 따라 테이블을 쓰지 않으면 이와 같습니다.
"<table><tr>111</tr></table>";
생성 된 html은 " 111<table><tr></tr></table>“， JQ에서 $(“<table><tr>111</tr></table>”)， 그리고 생성 된 HTML은 다음과 같다 ["111","<table><tr></tr></table>"]， 표준 ...
IE의 또 다른 예외. tbody는 InnerHTML을 통해 자동으로 추가되며 태그를 잘못 중첩하면 그는 당신을 신경 쓰지 않을 것입니다. AppendChild 방법은 다른 브라우저와 같이 TBody를 적극적으로 생성하지 않습니다.
$ .support.htmlserialize
IE678 브라우저는 InnerHTML을 통해 링크 태그를 동적으로 생성 할 수 없습니다. 새 태그를 만들어 만들기 위해 :
<html> <head> <meta charset = "utf-8"/> <title> 호환 </title> </head> <bod> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ( "div"), index = 0; el.style.csstext = "PADDING; POSITION : TOP : 0; 오른쪽 : 0; 19%; RETURN #F00;"; }; </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>대부분의 링크 태그는 innerhtml을 통해 생성 될 수 있지만 InnerHTML을 통해 스크립트 태그를 생성하는 것은 불가능합니다.
1 2NEXT 페이지 전체 텍스트를 읽으십시오