css および javascript_javascript スキルのブラウザ間互換性の概要

この記事では、CSS と JavaScript のブラウザ間の互換性の問題を多数の例の形でまとめています。皆さんの参考に共有してください。具体的な概要は次のとおりです。

1. CSS スタイルの互換性

1. FLOAT クローズ (フロートのクリア)

一部のブラウザで Web ページがずれて表示される場合、多くの場合、実際に閉じられずに float が使用されていることが原因であり、これも div が高さに適応できない理由の 1 つです。親 div が float に設定されていないが、その子 div が float に設定されている場合、親 div は子 DIV 全体をラップできません。この状況は通常、親 DIV に複数の子 DIV が含まれている場合に発生します。解決策:

1) float も親 DIV に設定します

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) ユニバーサルフロートクロージャー

次のコードをグローバル 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 はサポートしていないことに注意してください。

41d83c5e213aa4e032d787fa695fca7b

この文をページに追加して、ページを 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 では幅 width にパディングは含まれませんが、Ie6 ではパディングが含まれます。

2. JavaScript 対応

1. 子と子ノード

子、IE が提供する childNodes、および firefox の childNode の動作は異なります。Firefox の ChildNode は、改行文字と空白文字を親ノードの子ノードとしてカウントしますが、IE の childNode と子の動作は異なります。例:

dc6dce4a544fdca2df29d5ac0ea9906byizhu200016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

ID dd の div は、IE では childNodes を使用して表示されます。子ノードの数は 1 ですが、ff では、その childNode が ["n ", div, であることがわかります。 「ん」]。

Firefox で Children 属性をシミュレートするには、次のようにします:

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