CSS 및 javascript_javascript 기술의 브라우저 간 호환성 요약

이 글은 CSS와 JavaScript의 브라우저 간 호환성 문제를 많은 예시의 형태로 요약합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 내용을 요약하면 다음과 같습니다.

1. CSS 스타일 호환성

1. FLOAT 클로징(플로트 클리어)

일부 브라우저에서 웹페이지가 잘못 정렬되어 표시되는 경우는 실제로 닫히지 않고 float를 사용하기 때문인 경우가 많습니다. 이는 div가 높이에 적응할 수 없는 이유 중 하나이기도 합니다. 상위 div가 부동으로 설정되지 않았지만 해당 하위 div가 부동으로 설정된 경우 상위 div는 전체 하위 DIV를 래핑할 수 없습니다. 이러한 상황은 일반적으로 상위 DIV에 여러 하위 DIV가 포함되어 있을 때 발생합니다. 해결책:

1) 또한 상위 DIV에 float를 설정합니다

2) 모든 하위 DIV 뒤에 빈 DIV 를 추가합니다(현재 Ext에서는 이 작업을 수행함). 예:

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
   <div class="son1"></div>
   <div class="son2"></div>
   <div class="clear"></div>
</div>

3) 범용 플로트 폐쇄

Global CSS에 다음 코드를 추가하고 닫아야 하는 div에 class="clearfix"를 추가하세요. 매번 작동합니다.

<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

:after(의사 개체), 개체 뒤에 발생하는 콘텐츠를 설정하며 일반적으로 콘텐츠와 함께 사용됩니다. IE는 이 의사 개체를 지원하지 않으며 Ie 브라우저에서 지원하지 않으므로 IE/WIN 브라우저에 영향을 주지 않습니다. . 이것이 가장 골치 아픈 일입니다.

4) 오버플로:자동

상위 DIV의 CSS에 Overflow:auto를 추가하면 작업이 완료됩니다. 예:

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
   <div class="son1"></div>
   <div class="son2"></div>
</div>

주변 요소를 잘 확장할 수 없는 이유가 오버플로라는 것이 원칙입니다. 오버플로는 눈에 보이지 않기 때문입니다(W3C 설명 참조). 이제 주변 요소에 "overflow:auto"를 추가하기만 하면 문제가 해결될 수 있습니다. 결과적으로 IE를 제외하면 문제가 실제로 해결될 수 있습니다. 다음 단계는 IE 문제를 해결하는 것입니다. "_height:1%"를 추가하면 문제가 완전히 해결됩니다. 시도해 보았는데 실제로는 "_height:1%"를 추가하지 않고도 IE에서 작동합니다. 그대로 놔두세요.

2. 줄임표

.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

길이를 초과하면 초과된 텍스트가 자동으로 잘리고 줄임표로 끝납니다. 기술은 좋은 기술이고 많은 사람들이 무작위로 사용하기를 좋아하지만 Firefox에서는 이를 지원하지 않는다는 점을 참고하시기 바랍니다.

32334645fd987833d192d177b6af92ff

페이지에 이 문장을 추가하여 IE7과 호환되는 페이지를 만드세요

참고로! DIV 너비와 높이 설정에 주의하세요. Firefox의 경우 상위 div 스타일 display:inline-block;

3. 커서:손 및 커서:포인터

Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다

해결 방법: 포인터
를 균일하게 사용

4. CSS 투명성

여러 브라우저는 다양한 방식으로 투명도를 지원합니다. IE, Firefox, Chrome, Safari 등과 같은 주류 브라우저에서 투명도 효과가 정상적으로 표시될 수 있도록 투명도 클래스를 정의할 수 있습니다. 3개 항목을 작성해야 하므로 매번 복사할 필요는 없습니다.

구체적인 코드는 다음과 같습니다.

.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.6; /*支持 FireFox 浏览器*/
opacity:0.6; /*支持 Chrome, Opera, Safari 等浏览器*/
}

5.css의 너비와 패딩

IE7과 FF에서는 너비 너비에 패딩이 포함되지 않지만 Ie6에서는 패딩이 포함됩니다.

2. 자바스크립트 호환

1. 어린이와 어린이노드

IE에서 제공하는 childNode와 Firefox의 childNodes의 동작은 다릅니다. Firefox의 ChildNodes는 개행 문자와 공백 문자를 상위 노드의 하위 노드로 계산하지만 IE의 childNode와 하위는 그렇지 않습니다. 예:

e52f6a33e1d0112607dc4e57e0954fa2

dc6dce4a544fdca2df29d5ac0ea9906byizhu200016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

id가 dd인 div는 IE에서 childNodes를 사용하여 표시되는 반면, ff에서는 3개의 childNode가 ["n ", div, "N"].

Firefox에서 어린이 속성을 시뮬레이션하려면 다음을 수행할 수 있습니다.

if (typeof(HTMLElement) != "undefined" && !window.opera) {
  HTMLElement.prototype.__defineGetter__("children", function() {
    for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
      n = this.childNodes[i];
      if (n.nodeType == 1) {
        a[j++] = n;
        if (n.name) {
          if (!a[n.name])
            a[n.name] = [];
          a[n.name][a[n.name].length] = n;
        }
        if (n.id)
          a[n.id] = n;
      }
    }
    return a;
  });
} 

2. 파이어폭스와 IE 사건

window.event는 IE에서만 사용할 수 있고, Firefox에서는 사용할 수 없습니다. 왜냐하면 Firefox의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다. Firefox는 매개변수 전달을 위해 소스에서 이벤트를 추가해야 합니다. IE는 이 매개변수를 무시하고 window.event를 사용하여 이벤트를 읽습니다.

예를 들어 IE에서 마우스 위치를 가져오는 방법은 다음과 같습니다.

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

을

으로 변경해야 합니다.

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script>

才能在两种浏览器下使用

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")
ie使用document.idname或者document.getElementById("idName")
解决办法：统一使用document.getElementById("idName");

4. const问题

在Firefox下，可以使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量；
解决方法：统一使用var关键字来定义常量。

5.frame问题

以下面的frame为例：

53f90f43de4b4c54050c1625b8bc151c

a)访问frame对象

IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名；
Firefox：只能使用window.frameName来访问这个frame对象；
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象；

b) 切换frame内容

在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容；

如果需要将frame中的参数传回父窗口（注意不是opener，而是parent），可以在frame中使用parent来访问父窗口。例如：

parent.document.form1.filename.value="Aqing";

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在；

7. firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement

firefox：obj.parentNode

解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode

8.innerText的问题

innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；

解决方法：

if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById('element').innerText = "my text";
} else {
  document.getElementById('element').textContent = "my text";
} 

9.AJAX获取XMLHTTP的区别

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。

希望本文所述对大家WEB程序设计有所帮助。