C'est ma méthode, j'utilise le conditionnel pour cible les fichiers CSS pour IE navigateurs.
Disons que vous avez votre div avec l'id #page_container. Dans votre maîtrise régulière.css et css3.fichier css, vous donnez la largeur, la hauteur, des coins arrondis et une ombre portée avec les styles.
Maintenant, quand IE frappe votre page, il va tirer dans la condition de css que vous aviez mis en place. Pour la même div#page_container, vous pouvez modifier la largeur d'un bit, la hauteur, peut-être que certains remplissage, puis de lui donner une image de fond d'écran pour la faire ressembler à l'ombre, arrondi d'angle version.
De sorte que votre tête va avoir ceci:
<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>
Dans le maître.fichier css, vous avez cette définition pour votre div principale:
div#page_container {
width: 960px;
height: auto;
padding: 10px 10px 10px 10px;
background: #ccc;
drop-shadow: whatever...
rounded-corner: whatever...
}
Maintenant, dans votre ie.fichier css, et parce qu'il est référencé dans le deuxième, la définition de la cascade vers le bas de sorte que vous pouvez le modifier un peu:
div#page_container {
width: 960px;
height: auto;
padding: 15px 15px 15px 15px; /* this is key */
background: #ccc url(/path/to/image.file) no-repeat top left;
}
Ajouter juste assez de rembourrage supplémentaire ainsi les ombres portées s'inscrivent dans votre background-image. Car il des cascades vers le bas, il va remplacer l'original 10px padding-vous eu, d'élargir le modèle de boîte pour s'adapter dans votre extra ombre graphiques.
Quelques avantages de cette méthode sont:
- Seulement IE va voir à cette définition, et l'appel à l'image. Si c'est un fort volume de l'app, qui vous permettra d'économiser de la bande passante et les retards associés à l'appel.
- De même, parce que vous n'avez pas coder en dur dans le coin arrondi graphiques que chaque navigateur voir, vos utilisateurs de Firefox et Safari n'aurez pas besoin de frapper le serveur avec image supplémentaire des appels.
- Pas besoin d'ajouter encore un autre plug-in javascript qui vérifie pour IE, crée de nouvelles de balisage, de temps, etc...
curvy dom mess
chouette dom mess
