Ringkasan keserasian silang pelayar bagi kemahiran css dan javascript_javascript

Artikel ini meringkaskan isu keserasian merentas penyemak imbas CSS dan JavaScript dalam bentuk sejumlah besar contoh. Kongsikan dengan semua orang untuk rujukan anda. Ringkasan khusus adalah seperti berikut:

1. Keserasian gaya CSS

1. Penutupan FLOAT (membersihkan apungan)

Apabila halaman web dipaparkan tidak sejajar pada sesetengah penyemak imbas, ia selalunya kerana float digunakan dan bukannya benar-benar tertutup Ini juga salah satu sebab mengapa div tidak dapat menyesuaikan diri dengan ketinggiannya. Jika div induk tidak ditetapkan untuk terapung tetapi div anak ditetapkan untuk terapung, div induk tidak boleh membalut keseluruhan DIV anak Keadaan ini biasanya berlaku apabila DIV induk mengandungi berbilang DIV anak. Penyelesaian:

1) Tetapkan juga apungan kepada DIV induk

2) Tambahkan DIV kosong selepas semua DIV anak (pada masa ini Ext melakukan ini), contohnya:

.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) Penutupan apungan sejagat

Tambahkan kod berikut pada CSS Global dan tambahkan class="clearfix" pada div yang perlu ditutup.

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

:selepas (objek pseudo), menetapkan kandungan yang berlaku selepas objek, biasanya digunakan bersama dengan kandungan IE tidak menyokong objek pseudo ini dan tidak disokong oleh pelayar IE, jadi ia tidak menjejaskan pelayar IE/WIN. . Ini yang paling menyusahkan.

4) limpahan:auto

Hanya tambahkan limpahan:auto pada CSS DIV induk dan anda sudah selesai. Contoh:

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

Prinsipnya ialah sebab elemen persisian tidak dapat dilanjutkan dengan baik ialah limpahan, kerana limpahan tidak dapat dilihat (lihat penjelasan W3C). Sekarang, selagi anda menambah "overflow:auto" pada elemen persisian, masalahnya boleh diselesaikan. Hasilnya ialah kecuali untuk IE, ia benar-benar boleh diselesaikan. Langkah seterusnya ialah menyelesaikan masalah IE Jika anda menambah "_height:1%", masalah itu akan selesai sepenuhnya. Saya mencubanya, dan ia sebenarnya berfungsi di bawah IE tanpa menambah "_height:1%".

2. Pemotongan elipsis

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

Ini akan memotong teks berlebihan secara automatik selepas melebihi panjang, dan berakhir dengan elipsis. Teknologi ialah teknologi yang baik, dan ramai orang suka menggunakannya secara rawak, tetapi sila ambil perhatian bahawa Firefox tidak menyokongnya.

6b6e7485e3bb8f4c8cfe7684cc77910a

Tambahkan ayat ini pada halaman untuk menjadikan halaman itu serasi dengan IE7

Untuk rujukan! Izinkan saya mengingatkan anda tentang isu terapung yang memerlukan perhatian Beri perhatian kepada menetapkan lebar dan ketinggian DIV. Perhatikan tetapan overflow:hidden; Untuk Firefox, paparan gaya div induk;

3. kursor:tangan dan kursor:penunjuk

Firefox tidak menyokong tangan, tetapi IE menyokong penunjuk
Penyelesaian: Gunakan penunjuk

secara seragam

4. Ketelusan CSS

Beberapa penyemak imbas menyokong ketelusan dalam cara yang berbeza Untuk memastikan kesan ketelusan boleh dipaparkan seperti biasa dalam penyemak imbas arus perdana seperti IE, Firefox, Chrome, Safari, dsb., kami boleh menentukan kelas ketelusan, kerana selagi itu. Saya perlu menulis 3 item, jadi saya tidak perlu menyalinnya setiap kali.

Kod khusus adalah seperti berikut:

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

lebar dan padding dalam 5.css

Dalam IE7 dan FF, lebar lebar tidak termasuk padding, tetapi dalam Ie6 ia termasuk padding.

2. Serasi dengan JavaScript

1. kanak-kanak dan childNodes

Tingkah laku kanak-kanak, childNodes yang disediakan oleh IE dan childNodes di bawah firefox adalah berbeza. ChildNodes di bawah firefox akan mengira baris baharu dan aksara ruang kosong sebagai nod anak nod induk, manakala childNodes dan anak IE tidak. Contohnya:

e52f6a33e1d0112607dc4e57e0954fa2
dc6dce4a544fdca2df29d5ac0ea9906byizhu200016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Div dengan id dd dilihat menggunakan childNodes di bawah IE. Bilangan nod anak ialah 1, manakala di bawah ff ialah tiga. "n"].

Untuk mensimulasikan atribut kanak-kanak dalam Firefox kita boleh melakukan ini:

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. Kejadian firefox dan iaitu

window.event hanya boleh digunakan di bawah IE, tetapi bukan di bawah Firefox Ini kerana acara Firefox hanya boleh digunakan di tempat kejadian berlaku. Firefox mesti menambah peristiwa daripada sumber untuk lulus parameter. IE mengabaikan parameter ini dan menggunakan window.event untuk membaca acara.

Sebagai contoh, berikut ialah cara untuk mendapatkan kedudukan tetikus di bawah IE:

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

perlu ditukar kepada

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