div+CSS serasi dengan pertukaran Xiaojie_Experience

Perbezaan antara IE6 dan FF:
latar belakang:oren;*latar belakang:biru;
Perbezaan antara IE6 dan IE7:
latar belakang:hijau !penting;latar belakang:biru;
Perbezaan antara IE7 dan FF:
latar belakang :oren; *latar belakang:hijau;
Perbezaan antara FF, IE7, IE6:
latar belakang:oren;*latar belakang:hijau !penting;*latar belakang:biru; 🎜>

HEAD 1. Beberapa pelayar dalam CSS menyokong kata kunci yang berbeza, yang boleh ditakrifkan berulang kali untuk keserasian penyemak imbas
!penting boleh dikenali oleh FireFox dan IE7
* boleh dikenali oleh IE6, Diiktiraf oleh IE7
_ Diiktiraf oleh IE6
*+ Diiktiraf oleh IE7
2 ulasan bersyarat khusus IE








3. Beberapa pelayar sebenarnya Penjelasan daripada piksel
IE/Opera: Lebar sebenar objek = (margin-kiri) + lebar + (margin-kanan) Firefox/Mozilla: Lebar sebenar objek = (margin-kiri) + ( sempadan-kiri -lebar) + (lapik-kiri) + lebar + (lapik-kanan) + (sempadan-kanan-lebar) + (margin-kanan)
4 Masalah gerak isyarat tetikus: Atribut kursor FireFox tidak menyokong tangan , tetapi kedua-dua penunjuk dan IE menyokong kedua-duanya; jadi untuk keserasian, penunjuk digunakan
5 Apabila menetapkan atribut Gaya teg HTML dalam FireFox, semua nilai kedudukan, lebar, tinggi dan saiz mesti diikuti. oleh px. IE juga menyokong kaedah penulisan ini, jadi ia ditambah secara seragam. Sebagai contoh, Obj.Style.Height = imgObj.Style.Height + 'px'; 5px; padding-right :4px; padding-bottom:3px; margin:0px;padding:0px; di mana Atribut margin sah untuk IE, dan atribut padding sah untuk FireFox
8. Ketelusan kawalan CSS: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60); FireFox: opacity:0.6;
9. CSS mengawal sudut bulat: IE: tidak menyokong sudut bulat; border-radius-topleft:4px;
-moz-border -radius-topright:4px;
10. Jidar bonjolan dua garisan CSS: IE: sempadan: 2px permulaan; warna: #d4d0c8 putih;
-moz-border-right- color:#404040 #808080
-moz-border-bottom-colors:#404040 #808080
11; cursor:url() untuk menyesuaikan fail gaya kursor dan gaya warna bar skrol; FireFox Kedua-dua perkara di atas tidak disokong
12. IE mempunyai pepijat di mana kawalan Pilih sentiasa berada di atas, dan semua CSS tidak berfungsi pada Pilih kawalan
13. IE menyokong tag Label dalam Borang, termasuk gambar dan teks Kandungan FireFox tidak menyokong Label yang mengandungi gambar Mengklik pada gambar tidak akan menyebabkan label berlabel Radio atau Kotak Semak mempunyai kesan
14. . TextArea dalam FireFox tidak menyokong acara onScroll
15 FireFox tidak menyokong sebaris dan blok paparan
16 Apabila FireFox menetapkan margin-kiri dan margin-kanan kepada auto pada Div, tetapi ia tidak berfungsi dalam IE
17 Apabila FireFox menetapkan penjajaran teks pada Body, Div perlu menetapkan margin: auto (terutamanya margin kiri-kanan) sebelum ia boleh dipusatkan
18. Sebaiknya tetapkan gaya CSS hiperpautan dalam susunan ini: L-V-H-A.Iaitu,


Ini boleh mengelakkan sesetengah hiperpautan selepas dilawati tidak akan mempunyai hover dan gaya aktif
19 dalam IE Tetapkan word-wrap:break-word dalam FireFox; gunakan kaedah sisipan JS untuk mencapai ini:


20. bekas tidak akan dapat menyokong Open
Penyelesaian secara automatik: Tambahkan CSS clear:both
pada teg seterusnya selepas teg tamat 21. Selepas terapung, IE6 mentafsirkan margin luar sebagai dua kali ganda margin sebenar Penyelesaian: Tambah paparan: inline
22 tengah |teks-bawah
23 Terdapat jurang antara dua lapisan di bawah IE6 Penyelesaian: Tetapkan div kanan untuk turut terapung: kiri atau tentukan margin-kanan:-3px berbanding IE6; 24. Kandungan dalam LI melebihi panjang Kemudian paparkan elipsis
li {
lebar:200px-; space:nowrap;
text-overflow:ellipsis;
-o-text-overflow: elipsis; 🎜>25. Tukar elemen Tetapkan ketinggian dan ketinggian garisan kepada nilai yang sama untuk memusatkan teks secara menegak
-->

26 Untuk menjajarkan kotak input teks, anda mesti menambah: tengah; tetapan atribut dalam CSS
27 Jika penyemak imbas yang menyokong piawaian WEB menetapkan nilai ketinggian tetap, ia tidak akan diregangkan seperti IE6, tetapi anda ingin menetapkan ketinggian tetap dan boleh diregangkan? adalah untuk mengalih keluar atribut ketinggian dan menetapkan min-height , agar serasi dengan IE6 yang tidak menyokong min-height, ia boleh ditakrifkan seperti berikut:

29 IE6 tidak boleh mentakrifkan bekas dengan ketinggian kira-kira 1px kerana masalah ketinggian garisan lalai Penyelesaian: Tetapkan bekas dalam CSS seperti: overflow:hidden |

31 FireFox akan bertindak balas dengan sewajarnya selepas menetapkan atribut Padding Meningkatkan nilai atribut Lebar dan Tinggi, IE tidak akan
Penyelesaian: Gunakan kaedah !important untuk menentukan sesuatu. set tambahan Ketinggian dan Lebar

32 FireFox mengabaikan ruang antara div, tetapi IE mengendalikannya ; sebagai sisihan 3px yang terkenal; dan sebabnya sukar untuk diketahui 33. Terbentuk seperti Format berikut ialah Apabila terdapat banyak kandungan, walaupun ibu bapa menetapkan ketinggian kepada 100% atau automatik, ia masih tidak akan utuh di bawah pelayar yang berbeza penyelesaiannya adalah untuk menjana ruang dengan ketinggian 1 di bahagian bawah lapisan, kodnya adalah seperti berikut
34. IE et FireFox interprètent différemment la taille de la police, FireFox est de 13px et IE est de 16px
35 IE et FireFox interprètent la taille des espaces différemment, FireFox est de 4px et IE est de 8px
Tout d'abord, il existe de nombreuses introductions aux méthodes de hack CSS sur Internet, et il en existe de nombreux types. Les débutants se sentent souvent confus. Certaines de ces méthodes de hack CSS ciblent une situation très particulière, tandis que d’autres sont des méthodes relativement générales.
Pour ces derniers, nous pouvons accorder plus d'attention à en collecter dans nos études et notre travail quotidiens. Les premiers n'ont pas besoin d'y prêter trop d'attention. Il nous suffit de rechercher en ligne pour trouver des solutions lorsque nous les rencontrons.
Voici une méthode de hack plus générale. Par exemple, pour un certain attribut en CSS, nous espérons définir différentes valeurs pour différents navigateurs. Par exemple, pour un certain div, nous voulons que la largeur soit de 50 pixels dans Firefox et de 60 pixels dans IE. Alors comment y parvenir ? Veuillez consulter le code suivant :

#demo div{
width:50px; /* FireFox valid*/
+width:60px /* IE valid*/
}

Dans le code ci-dessus, le width:50px dans la ligne 2 est un style normal. Dans la ligne suivante, ajoutez un signe plus devant l'attribut width. Ce style est considéré comme invalide dans Firefox, mais dans IE, ce signe plus. Le nombre sera ignoré, il est donc toujours compris comme l'attribut width, remplaçant ainsi le paramètre de l'élément précédent, afin que le navigateur Firefox et le navigateur IE puissent être distingués.
Et si vous souhaitez différencier davantage entre IE 6 et IE 7 ? Veuillez consulter le code suivant :

#demo div{
width:50px; /* FireFox valid*/
+width:60px /* IE 7 valid*/
_width:70px; ; /* IE 6 valide*/
}

Le code ci-dessus permet de distinguer les trois navigateurs. Dans IE7, si un signe plus est ajouté avant l'attribut, le signe plus sera ignoré, et si un trait de soulignement est ajouté avant l'attribut, le style entier sera ignoré, réalisant ainsi la distinction entre les trois navigateurs traditionnels.
À ce stade, on se demande naturellement, dans quelles circonstances cette méthode serait-elle utilisée pour distinguer les navigateurs ? Il existe généralement deux situations pour les pages que nous voulons créer. L'une consiste à la créer à partir de zéro et l'autre consiste à la modifier ou à la réparer en fonction d'une page Web existante.
Pour le premier cas, nous sommes très clairs sur chaque détail de la page Web, nous ne rencontrons donc pas souvent des problèmes de compatibilité avec Firefox et IE. Même si nous les rencontrons, nous pouvons généralement trouver d'autres moyens de les résoudre. Pour le deuxième cas, c'est beaucoup plus compliqué, car une page web peut être très complexe, et la relation en cascade est également très compliquée. Pour celui qui prend la relève plus tard, il est difficile de déterminer combien de couches de paramètres il y a sur une. certains attributs l'affecteront. Il a un impact, il ne peut donc souvent être réparé qu'en "appliquant du plâtre".
Par exemple, l'effet final de la page suivante, lors de la création de la boîte aux coins arrondis, dans IE, une fois les coins arrondis alignés, le désalignement apparaît comme indiqué dans l'image dans Firefox, et s'il est ajusté selon Firefox, le désalignement se reproduira dans IE.
Le contenu de la page est imbriqué couche par couche, et il est difficile de trouver la source du problème sans connaître les détails. Par conséquent, il est très pratique d'utiliser la méthode de patch ici (bien que ce ne soit pas la méthode la plus élégante et la plus complète). Par exemple, pour les attributs qui contrôlent la position de l'image arrondie, utilisez la méthode ci-dessus et contrôlez-les séparément.
En résumé, comme mentionné ci-dessus, vous pouvez utiliser la méthode du signe plus ou du soulignement pour n'importe quel attribut afin d'obtenir des paramètres individuels pour différents navigateurs. Bien sûr, en fin de compte, il faut souligner que toute méthode de hack doit être utilisée avec prudence. Il est préférable de concevoir selon un CSS standard et élégant. Un tel code sera beaucoup plus lisible et maintenable, ce qui est également notre objectif. poursuivre.

Pourquoi div+css n'a-t-il aucun problème dans ie6, mais a un problème dans Firefox, qui est sérieusement déformé, quelle en est la raison, merci
La plus grande différence entre IE et FF est de 1 . À une résolution de 1024, IE affiche jusqu'à 1002PX et FF affiche 1005PX2. IE est super tolérant aux pannes, ce qui signifie que si vous écrivez le mauvais code et en écrivez moins, il peut afficher le bon FF~~~`Un problème courant pour les novices : les flotteurs flottants ne sont pas effacés~~~~.clear{ clear : les deux ; hauteur : 1px ; top :-1px ; overflow:hidden} Ajoutez un

après chaque flottant.