web-dev-qa-db-fra.com

prise en charge du dimensionnement des boîtes dans IE7

Je viens de découvrir le box-sizing: border-box Propriété CSS qui résout pour moi un tas de problèmes de mise en page entre navigateurs.

Le seul problème que j'ai maintenant, c'est que IE7 ne semble pas le prendre en charge. Existe-t-il un hack pour que IE7 le supporte?

csscss3internet-explorer-7
47
lowellk

Il existe plusieurs façons de le faire, aucune n'est parfaite.

Comme vous le signalez:

  • Firefox/Opera/Safari/Chrome/IE8 + reconnaîtra la propriété de dimensionnement de boîte vous permettant d'utiliser des bordures).
  • IE6 utilisera par défaut le modèle de boîte à bord old school (correct?).
  • Cependant, IE7 utilise le modèle de boîte de remplissage W3C en mode standard et ne reconnaîtra pas la propriété CSS de dimensionnement de boîte, il n'y a donc aucun moyen de revenir au modèle de boîte de bordure. Si vous devez prendre en charge IE7 (et vous le faites probablement toujours), vous êtes coincé avec l'une des quatre options:

1. Commentaires conditionnels:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

Utilisez le dimensionnement des boîtes pour IE8 et 9, puis effectuez des remplacements spécifiques pour IE7. Cette option sera douloureuse.

2. Le Polyfill Schepp Box Sizing:

https://github.com/Schepp/box-sizing-polyfill

Cet excellent Polyfill est un fichier HTC qui modifie le comportement du navigateur par défaut dans IE6 et 7 afin qu'ils utilisent le modèle de boîte W3C. Il convient à une utilisation légère, mais peut entraîner des problèmes s'il est utilisé de manière intensive. À utiliser avec prudence et TEST.

3. Divisions imbriquées à l'ancienne:

L'approche div imbriquée à l'ancienne est toujours un bon moyen:

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

Un div imbriqué non sémantique fournit indirectement le remplissage, avec l'inconvénient que votre balisage devient désordonné. Évidemment, n'utilisez pas de styles en ligne, je les utilise ici à des fins d'illustration.

Le vieil adage N'utilisez jamais de rembourrage sur un élément à largeur fixe reste vrai.

4. Ma solution préférée - Un sélecteur d'enfant direct:

L'inverse est avec le sélecteur d'enfant direct. Supposons que vous ayez une div à largeur fixe contenant du contenu:

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

Vous pouvez ensuite écrire une règle pour ajouter des marges gauche et droite à tous les enfants directs du div:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

Cela ajoutera une petite marge aux h1 et p, mais pas aux em imbriqués, donnant l'apparence d'un remplissage 20px sur la div de contenu, mais sans déclencher le bug du modèle de boîte.

5. Envisagez de supprimer le support IE7

IE7 est le dernier navigateur à ne pas reconnaître la propriété de dimensionnement de boîte. Si vous recevez peu de trafic d'IE7, vous pourriez envisager de supprimer le support. Votre CSS sera beaucoup plus agréable.

À la fin de 2013, c'est mon option préférée.

EDIT 2017: Il est probablement longtemps passé de supprimer le support d'IE7 maintenant, et d'utiliser simplement border-box.

102
superluminary

Vous pouvez utiliser un polyfill pour le faire fonctionner sur certains éléments, mais cela n'a pas fonctionné pour mes champs de saisie.

https://github.com/Schepp/box-sizing-polyfill

box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);

Notez simplement que l'URL de comportement est relative à la page et non au fichier CSS. Utilisez des chemins d'accès relatifs à la racine du site (démarrez l'URL avec une barre oblique, puis allez à partir de là).

17
neojp