Prise en charge de la taille de la boîte dans IE7

Question

Je viens de découvrir la propriété CSS box-sizing: border-box qui résout pour moi un tas de problèmes de mise en page croisés.

Le seul problème que j'ai maintenant, c'est qu'IE7 ne semble pas le supporter. Y at-il un hack pour obtenir IE7 pour le supporter?

Answer 1

Il y a plusieurs façons de le faire, aucun n'est parfait.

Comme vous le soulignez:

• Firefox / Opera / Safari / Chrome / IE8+ reconnaissent le box-sizing de la propriété, vous permettant d'utiliser border-boîtes.
• IE6 va utiliser la vieille école (correct?) border-box modèle par défaut.
• Cependant IE7 utilise le W3C rembourrage modèle de boîte quand en mode standard, et ne reconnaîtra pas le CSS box-sizing bien donc il n'y a aucun moyen de revenir à la frontière du modèle de boîte. Si vous avez besoin de soutien IE7 (et vous aurez probablement toujours le cas), vous êtes coincé avec une des quatre options:

1. Les Commentaires Conditionnels:

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

Utiliser box-sizing pour IE8 et 9, puis apporter des dérogations pour IE7. Cette option sera douloureux.

2. Le Schepp Boîte De Dimensionnement Polyfill:

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

Cet excellent Polyfill est un HTC fichier qui modifie le comportement par défaut du navigateur dans IE6 et 7, de sorte qu'ils utilisent le W3C modèle de boîte. C'est bien pour une utilisation légère, mais peut causer des problèmes de son propre si elle est utilisée de manière intensive. À utiliser avec prudence et de TEST.

3. De Style Ancien Divs Imbriqués:

L'ancien style imbriqué div approche est tout de même une bonne façon:

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

Un non-sémantique imbriquée div fournit le rembourrage indirectement, avec l'inconvénient que votre balisage devient désordonné. Évidemment, ne pas utiliser de styles en ligne, je suis en les utilisant pour des raisons d'illustration.

Le vieil adage ne Jamais utiliser de rembourrage sur une largeur fixe de l'élément tient toujours vrai.

4. Ma Solution Préférée Direct Sélecteur D'Enfant:

À l'inverse, c'est avec le direct sélecteur d'enfant. Disons que vous avez un fixe largeur de la div contenant le contenu:

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

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

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

Cela va ajouter un peu de marge pour le h1 et p, mais pas à la imbriquée em, donnant l'apparence de 20px de rembourrage sur le contenu de la div, mais sans déclencher le modèle de boîte de bug.

5. Pensez à supprimer IE7 soutien

IE7 est le dernier navigateur de ne pas reconnaître le box-sizing de la propriété. Si vous avez peu de trafic à partir de IE7, vous pourriez envisager de l'abandonner soutien. Votre CSS sera beaucoup plus agréable.

Fin 2013, c'est mon option préférée.

Answer 2

Vous pouvez utiliser un polyfill pour le faire fonctionner sur certains éléments, mais cela ne fonctionnait pas pour mes champs d'entrée.

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

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

Notez simplement que le comportement de l'URL est relatif à 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 recommencez).

Answer 3

Je suis en supposant que vous êtes en utilisant pour l'obtenir autour de la IE6 modèle de boîte. Malheureusement, il n'y a vraiment pas de manière générale de façon à tromper les versions antérieures d'IE dans le soutien arbitraire des propriétés CSS.

Je recommande de ne pas utiliser l' box-sizing de la propriété, parce que chaque navigateur autre que IE6 va mettre en œuvre le modèle de boîte correctement. L' article de Wikipédia fait un bon travail en expliquant comment IE6 diffère.

Pour résoudre ce problème, je vous recommande d'utiliser une feuille de style différente pour IE6, et y compris en utilisant les commentaires conditionnels d'IE. Dans votre IE6 feuille de style, vous pouvez spécifier différentes largeurs/hauteurs/padding/marges de faire votre mise en page cohérente. Vous pouvez inclure une feuille de style pour IE6 seulement comme ceci:

<!--[if IE 6]>
  <link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->