Summary of cross-browser compatibility of css and javascript_javascript skills

This article summarizes the cross-browser compatibility issues of CSS and JavaScript in the form of a large number of examples. Share it with everyone for your reference. The specific summary is as follows:

1. CSS style compatibility

1. FLOAT closing (clearing float)

When web pages are displayed misaligned on some browsers, it is often because float is used instead of being truly closed. This is also one of the reasons why divs cannot adapt to their height. If the parent div is not set to float but its child div is set to float, the parent div cannot wrap the entire child DIV. This situation generally occurs when a parent DIV contains multiple child DIVs. Solution:

1) Also set float to the parent DIV

2) Add an empty DIV after all child DIVs (currently Ext does this), for example:

.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) Universal float closure

Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.

<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 (pseudo object), sets the content that occurs after the object, usually used in conjunction with content. IE does not support this pseudo object and is not supported by Ie browsers, so it does not affect IE/WIN browsers. This is the most troublesome.

4) overflow:auto

Just add overflow:auto to the CSS of the parent DIV and you’re done. Example:

.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>

The principle is that the reason why peripheral elements cannot be extended well is the overflow, because the overflow is invisible (see W3C's explanation). Now, as long as you add an "overflow:auto" to the peripheral element, the problem can be solved. The result is that except for IE, it can really be solved. The next step is to solve the IE problem. Add "_height:1%" and the problem will be completely solved. I tried it, and it actually works under IE without adding "_height:1%". Just leave it as it is.

2. Truncation ellipsis

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

This will automatically cut off the excess text after exceeding the length, and end with an ellipsis. Technology is good technology, and many people like to use it randomly, but please note that Firefox does not support it.

6b6e7485e3bb8f4c8cfe7684cc77910a

Add this sentence to the page to make the page compatible with IE7

For reference! Let me remind you of a floating issue that needs attention. Pay attention to setting the DIV width and height. Pay attention to setting overflow:hidden; pay attention to closing. For Firefox, the parent div style display:inline-block;

3. cursor:hand and cursor:pointer

Firefox does not support hand, but IE supports pointer
Solution: Use pointer

uniformly

4. CSS transparency

Several browsers support transparency in different ways. In order to ensure that the transparency effect can be displayed normally in mainstream browsers such as IE, Firefox, Chrome, Safari, etc., we can define a transparency class, because as long as I have to write 3 items, so I don’t have to copy them every time.

The specific code is as follows:

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

width and padding in 5.css

In IE7 and FF, the width width does not include padding, but in Ie6 it includes padding.

2. JavaScript compatible

1. children and childNodes

The behavior of children, childNodes provided by IE and childNodes under firefox are different. ChildNodes under firefox will count newlines and whitespace characters as child nodes of the parent node, while IE's childNodes and children will not. For example:

e52f6a33e1d0112607dc4e57e0954fa2
dc6dce4a544fdca2df29d5ac0ea9906byizhu200016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

The div with id dd is viewed using childNodes under IE. The number of child nodes is 1, while under ff it is three. We can see from the dom viewer of firefox that its childNodes are ["n ", div, "n"].

To simulate the children attribute in Firefox we can do this:

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. Incidents of firefox and ie

window.event can only be used under IE, but not under Firefox. This is because Firefox's event can only be used at the scene where the event occurs. Firefox must add events from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.

For example, here is how to get the mouse position under IE:

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

needs to be changed to

<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程序设计有所帮助。