Maison > interface Web > tutoriel CSS > le corps du texte

CSS Hack Encyclopedia - Apprenez à distinguer les échanges IE6-IE10, FireFox, Chrome, Opera_Experience

WBOY
Libérer: 2016-05-16 12:03:43
original
1610 Les gens l'ont consulté

Les navigateurs actuels sont IE6-IE10, Firefox, Chrome, Opera et Safari. . . Il y en a tellement, on peut dire qu'une centaine d'écoles de pensée s'affrontent, et il existe de nombreuses options pour les utilisateurs, mais c'est un problème pour les développeurs Web front-end.
Aujourd'hui, j'ai trié certains hacks CSS couramment utilisés, y compris les hacks IE et les hacks couramment utilisés pour les navigateurs Firefox, Chrome et Opera. J'ai combiné ces hacks CSS et écrit un petit testeur de navigateur. Comme le montre l'image :

CSS Hack Encyclopedia - Apprenez à distinguer les échanges IE6-IE10, FireFox, Chrome, Opera_Experience

Jetons un coup d'œil au code :

partie html :

Copier le code Le code est le suivant :

                                                                           ="couleur de fond : #ccc;">#ccc


                                                                                                                                                                                                                  #666;">#666

Couleur d'arrière-plan dans IE8 :                                                                                                                                                                    


Couleur d'arrière-plan sous IE10 : #0ff


#ff0                                                                                                                      p> ;Couleur d'arrière-plan dans Opera : #0f0



< ;/div>



Partie CSS, seule la partie Hack du code sera postée dans cette partie, et la mise en page ne sera pas publiée :

Copier le code

Le code est le suivant :.content .test { largeur : 200px;
hauteur : 200px ;
arrière-plan : #f60 ; /*tout*/
arrière-plan : #06f9 ; */
_background : #ccc; /*IE6*/
}

/* webkit et opéra */
@media all et (min-width:0){
.content . test {
arrière-plan : #0f0;
}
}

/* webkit */
@écran multimédia et (-webkit-min-device-pixel-ratio :0) {
.content .test {
arrière-plan : #ff0;
}
}

/*FireFox*/
@-moz-document url-prefix () {
.content .test {
background : #f0f;
}
}

/*IE9+*/
@media all et (min-width : 0) {
.content .test{
arrière-plan : #f009;
}
}

/*IE10+*/
@écran multimédia et (-ms-high -contraste : actif), (-ms-high-contrast : aucun) {
.content .test {
background : #0ff;
}
}





css-hack-ms-moz-webkit-o-Jb51.net.rar
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!