Dieser Artikel fasst die browserübergreifenden Kompatibilitätsprobleme von CSS und JavaScript anhand zahlreicher Beispiele zusammen. Teilen Sie es als Referenz mit allen. Die spezifische Zusammenfassung lautet wie folgt:
1. CSS-Stilkompatibilität
1. FLOAT-Abschluss (Clearing-Float)
Wenn Webseiten in einigen Browsern falsch ausgerichtet werden, liegt das oft daran, dass Float verwendet wird, anstatt wirklich geschlossen zu sein. Dies ist auch einer der Gründe, warum sich Divs nicht an ihre Höhe anpassen können. Wenn das übergeordnete Div nicht auf Float, sein untergeordnetes Div jedoch auf Float eingestellt ist, kann das übergeordnete Div nicht das gesamte untergeordnete DIV umschließen. Diese Situation tritt im Allgemeinen auf, wenn ein übergeordnetes DIV mehrere untergeordnete DIVs enthält. Lösung:
1) Setzen Sie außerdem float auf das übergeordnete DIV
2) Fügen Sie nach allen untergeordneten DIVs ein leeres DIV hinzu (derzeit macht Ext dies), zum Beispiel:
.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) Universeller Schwimmerverschluss
Fügen Sie den folgenden Code zu Global CSS hinzu und fügen Sie class="clearfix" zum Div hinzu, das geschlossen werden muss. Es funktioniert jedes Mal.
<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 (Pseudoobjekt) legt den Inhalt fest, der nach dem Objekt auftritt. Wird normalerweise in Verbindung mit Inhalten verwendet. IE unterstützt dieses Pseudoobjekt nicht und wird von IE-Browsern nicht unterstützt, sodass es keine Auswirkungen auf IE/WIN-Browser hat . Das ist am problematischsten.
4) overflow:auto
Fügen Sie einfach overflow:auto zum CSS des übergeordneten DIV hinzu und schon sind Sie fertig. Beispiel:
.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>
Das Prinzip ist, dass der Grund dafür, dass periphere Elemente nicht gut erweitert werden können, der Überlauf ist, weil der Überlauf unsichtbar ist (siehe W3C-Erklärung). Solange Sie dem Peripherieelement ein „overflow:auto“ hinzufügen, kann das Problem gelöst werden. Das Ergebnis ist, dass es mit Ausnahme des IE tatsächlich gelöst werden kann. Der nächste Schritt besteht darin, das IE-Problem zu lösen. Wenn Sie „_height:1%“ hinzufügen, wird das Problem vollständig gelöst. Ich habe es versucht und es funktioniert tatsächlich unter IE, ohne „_height:1%“ hinzuzufügen. Lassen Sie es einfach so, wie es ist.
2. Trunkierungsellipse
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
Dadurch wird der überschüssige Text nach Überschreiten der Länge automatisch abgeschnitten und mit Auslassungspunkten beendet. Technologie ist gute Technologie und viele Leute verwenden sie gerne nach dem Zufallsprinzip. Beachten Sie jedoch, dass Firefox sie nicht unterstützt.
Fügen Sie diesen Satz zur Seite hinzu, um die Seite mit IE7 kompatibel zu machen
Als Referenz! Ich möchte Sie an ein schwebendes Problem erinnern, das Aufmerksamkeit erfordert. Achten Sie auf die Einstellung overflow:hidden; achten Sie auf das Schließen des übergeordneten Div >
3. Cursor:Hand und Cursor:Zeiger
Firefox unterstützt keine Hand, aber IE unterstützt Zeiger
Lösung: Zeiger
einheitlich verwenden
4. CSS-Transparenz
Mehrere Browser unterstützen Transparenz auf unterschiedliche Weise, um sicherzustellen, dass der Transparenzeffekt in gängigen Browsern wie IE, Firefox, Chrome, Safari usw. normal angezeigt werden kann Ich muss 3 Artikel schreiben, damit ich sie nicht jedes Mal kopieren muss.Der spezifische Code lautet wie folgt:
.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.6; /*支持 FireFox 浏览器*/
opacity:0.6; /*支持 Chrome, Opera, Safari 等浏览器*/
}
Breite und Polsterung in 5.css
In IE7 und FF umfasst die Breite keine Auffüllung, in Ie6 jedoch die Auffüllung.
2. JavaScript-kompatibel
1. Kinder und ChildNodes
Das Verhalten von Kindern, vom IE bereitgestellten ChildNodes und ChildNodes unter Firefox unterscheidet sich. Zum Beispiel:
Um das Kinderattribut in Firefox zu simulieren, können wir Folgendes tun:
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. Vorfälle von Firefox und ie
window.event kann nur unter IE verwendet werden, nicht jedoch unter Firefox. Dies liegt daran, dass das Ereignis von Firefox nur an der Stelle verwendet werden kann, an der das Ereignis auftritt. Firefox muss zur Parameterübergabe Ereignisse aus der Quelle hinzufügen. IE ignoriert diesen Parameter und verwendet window.event, um das Ereignis zu lesen.So ermitteln Sie beispielsweise die Mausposition unter IE:
<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script>
geändert werden
<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为例：
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程序设计有所帮助。
