This article summarizes the compatibility issues between CSS and JavaScript in a large number of examples. Share it for your reference. The specific summary is as follows:
1. CSS style compatibility
1. FLOAT clearing float
Web pages are misaligned on some browsers, often because float is used and not really closed, which is also a reason why the div cannot adapt to the height. If the parent div does not set float but its child div has float, the parent div cannot cover the entire child DIV. This situation generally occurs when a parent DIV contains multiple child DIVs. Solution:
1) Set float for the parent DIV
2) Add an empty DIV after all subDIVs (this is what Ext does currently), 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> <div></div> <div></div> <div></div>3) Universal float closed
Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed, which has been tried and done.
<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 browser, so it does not affect the IE/WIN browser. This is the most troublesome.
4) overflow:auto
Just add overflow:auto to the CSS of the parent DIV. For example:
.parent{width:100px;overflow:auto}.son1{float:left;width:20px;}.son2{float:left;width:80px;}<div> <div></div> <div></div></div>The principle is that the reason why peripheral elements cannot be extended well lies in the overflow because the overflow is invisible (see W3C's explanation). Now just add an "overflow:auto" to the peripheral element, and the result is that it can really be solved except for IE. Next, we need to solve the IE problem. Adding "_height:1%" will completely solve this problem. I tried it, but it is OK to add "_height:1%" under IE, so keep it.
2. Cut lexicon
.hh {-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}This means that after the length is exceeded, the extra text will be cut off by itself and end with an ellipsis. Technology is a good technology, and many people like to use it randomly, but note that Firefox does not support it.
<meta http-equiv="x-ua-compatible" content="ie=7" />
Adding this sentence to the page can make the page compatible with IE7
For reference! I would like to remind you about a floating problem. Pay attention to setting the DIV width and height. Pay attention to setting the overflow:hidden; Pay attention to closing the display:inline-block for Firefox parent div styles;
3. cursor:hand and cursor:pointer
Firefox does not support hand, but ie supports pointer
Solution: Use pointer uniformly
4. CSS transparent
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 you have to write 3 items as soon as you write it, saving you copy it every time.
The specific code is as follows:
.transparent{filter:alpha(opacity=60); /*Support IE browser*/-moz-opacity:0.6; /*Support FireFox browser*/opacity:0.6; /*Support Chrome, Opera, Safari and other browsers*/}5.width and padding in css
In IE7 and FF, width width does not include padding, but in Ie6.
2. JavaScript compatibility
1. children and childrenNodes
There is a difference in behaviors of children, childrenNodes and childrenNodes under firefox provided by IE. ChildrenNodes under firefox will count both line breaks and whitespace characters as children of the parent nodes, while childrenNodes and children of IE will not. for example:
<div id="dd">
<div>yizhu2000</div>
</div>
A div with id dd is viewed with childNodes under IE. The number of children is 1 and three under ff. We can see from the dom viewer of firefox that its childNodes are ["/n", div, "/n"].
To simulate the properties of children under 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. Firefox and ie events
window.event can only be used in IE, not in Firefox, because Firefox event can only be used in the scene where the event occurs. Firefox must add event from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.
For example, the following method to obtain the mouse position under ie:
<button onclick="onClick()" >Get the horizontal coordinate of the mouse click</button><script type="text/javascript">function onclick(){alert(event.clientX);}</script>Need to be changed to
<button onclick="onClick(event)">Get OuterHTML</button><script type="text/javascript">function onclick(event){event = event || window.event;alert(event.clientX);}</script>Only use it in both browsers
3. HTML object acquisition problem
FireFox get method document.getElementById("idName")
ie uses document.idname or document.getElementById("idName")
Solution: Use document.getElementById("idName");
4. Const issue
In Firefox, you can use the const keyword or the var keyword to define constants;
In IE, you can only use the var keyword to define constants;
Solution: Use the var keyword to define constants.
5.frame problem
The following frame is an example:
<frame src="xxx.html" id="frameId" name="frameName" />
a) Access frame object
IE: Use window.frameId or window.frameName to access this frame object.frameId and frameName can have the same name;
Firefox: Only window.frameName can be used to access this frame object;
In addition, in both IE and Firefox, you can use window.document.getElementById("frameId") to access this frame object;
b) Switch frame content
In both IE and Firefox, you can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame;
If you need to pass the parameters in the frame back to the parent window (note that it is not an opener, but a parent), you can use parent in the frame to access the parent window. For example:
parent.document.form1.filename.value="Aqing";
6. Body Problem
Firefox's body exists before the body tag is fully read in by the browser; while IE's body must exist after the body tag is fully read in by the browser;
7. The difference between firefox and IE parent element (parentElement)
IE: obj.parentElement
firefox:obj.parentNode
Solution: Because both firefox and IE support DOM, all use obj.parentNode
8.InnerText problem
innerText works normally in IE, but innerText does not work in FireFox, textContent is required;
Solution:
if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('element').innerText = "my text";} else { document.getElementById('element').textContent = "my text";}9. The difference between AJAX getting XMLHTTP
var xmlhttp;if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest();} elseif (window.ActiveXObject) { // IE acquisition method xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}Note: In IE, the content of the xmlhttp.send(content) method can be empty, while firefox cannot be null. Send("") should be used, otherwise a 411 error will occur.
I hope this article will be helpful to everyone's WEB programming.