Zusammenfassung der browserübergreifenden Kompatibilität von CSS- und Javascript_Javascript-Kenntnissen

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.

aa023ff62623e73b27c431d7427fe2fb

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:

e52f6a33e1d0112607dc4e57e0954fa2

dc6dce4a544fdca2df29d5ac0ea9906byizhu200016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Das Div mit der ID dd wird mit childNodes unter IE angezeigt. Die Anzahl der untergeordneten Knoten beträgt 1, während es unter ff drei sind. Wir können aus dem Dom-Viewer von Firefox sehen, dass seine childNodes ["n", div, sind. "N"].

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> 

muss in

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为例：

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