box-sizing soutien dans IE7

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

Le seul problème que j'ai maintenant c'est que IE7 ne semble pas le supporter. Est-il un hack pour obtenir IE7 pour la soutenir?

C'est en effet une très bonne question. Bien que IE7 en lui-même n'est guère plus utilisé, il y a encore un bon nombre d'entreprises et de ministères qui ont leur S en mode de compatibilité. Ce qui est aussi bon que le même que ceux-ci se comportant comme IE7, et même IE11 propose que le mode de réglage.

InformationsquelleAutor lowellk | 2010-05-26

-7

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 la box-sizing de la propriété, parce que chaque navigateur autre que IE6 va mettre en œuvre le modèle de boîte correctement. Le Article de Wikipedia 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 à l'aide de 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:
```

```
- Merci pour l'info. Il est regrettable qu'une fois que ie7 a déménagé à faire les choses de la manière standard, il n'y a aucun moyen pour obtenir l'ancien comportement. Je pense que je préfère le ie6 modèle de boîte plus que le w3c, mais je suppose que nous sommes coincés avec le w3c en un maintenant.
- C'est un bon point, que IE7 a apporté des changements importants à la façon dont IE rend. Comme pour la compatibilité ascendante, c'est une utilisation du doctype, de ne pas spécifier l'on va faire IE revenir en mode quirks, qui est le IE5.5 moteur de rendu, je crois.
- Par le chemin, considérez partielle abandon de IE7 à l'aide de l'approche avec les isolé simplifié de la feuille de style.
- Le W3C modèle de boîte fait beaucoup plus de sens quand il s'agit de faire tout cela, mais cet espace est beaucoup trop petite pour aller dans les détails.
- Être en mesure de passer du modèle de boîte est important, surtout quand le style des éléments de formulaire, comme textarea et input[type=text]. Largeur de 100% ne sera pas de travailler dans de nombreux cas ici. Je pense que c'est mal d'entre vous l'appeler ie6 modèle de boîte depuis le w3c définit en fait les deux modèles boîte.
- Mais si vous utilisez la "box-sizing: border-box" de tous les navigateurs de se comporter comme des sauf IE6 IE7. Franchement le w3c modèle de boîte est un cauchemar quand vous faites les mises en page CSS parce que vous ne pouvez pas ajouter de remplissage/de frontières pour les zones sans souffler toute la mise en page. Elle suce plutôt.
- Je suis d'accord, le w3c modèle de boîte est un cauchemar, box-sizing a été bien accueilli attribut. Ce que je fais pour ie7 quand un élément d'une taille différente pour les autres navigateurs c'est d'utiliser le ie7 seulement css hack *width: 200px; ce qui me permet de définir un autre ensemble de paramètres pour ie7
- Les gars, vous avez tous tort sur IE6. IE6 implémente le standard W3C boîte-modèle, IE5/5.5 étaient les dernières versions avec le border-boxcomme comportement...
- Où est votre réponse, @Christoph? Ma réponse dit en gros "simplement traiter avec elle", alors que la plupart des upvoted réponse n'est pas réellement une réponse à tout. @superluminary a la meilleure réponse pour fournir d'autres approches, qui est l'endroit où mon upvote a allés.
- Je ne comprends pas tout ce sur IE6 mettre en œuvre les normes W3C modèle de boîte. Ce n'est pas, et j'ai arraché avec le fait qu'il n'a pas depuis des années, mais il y a assez de gens ici disent qu'il n'en faut pour me faire douter de moi-même.
InformationsquelleAutor wsanville
102

Il y a plusieurs façons de le faire, aucun idéal.

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:
```

```
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

Cette excellente 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:

Dans l'autre sens, c'est avec le direct sélecteur d'enfant. Disons que vous avez un fixe largeur de la div contenant 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 pourrait envisager l'abandon de la gestion. Votre CSS sera beaucoup plus agréable.

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

2017 EDIT: C'est sans doute, depuis longtemps, le temps de laisser tomber le support pour IE7, et juste utiliser border-box.
- +1 C'est vraiment la meilleure façon de supporter ie6/7/8 et le reste du monde. Tout le monde rend les marges de même vous vous n'avez jamais à vous inquiéter à ce sujet. Si vous avez à l'appui de ie6/7/8 (et beaucoup le font encore), alors il est préférable de s'habituer à ne jamais ajouter de rembourrage et de nidification votre divs. Dans un monde parfait, on pourrait débattre de la sémantique, mais dans un monde parfait, chaque navigateur blanc-qu'est-ce qu'ils vont soutenir et de ce qu'ils ne l'étaient pas. Mais ils ne le font pas. Ils ne se soucient pas.
- Encore une fois, IE6 prend en charge W3C modèle de boîte, pas la border-box-comme une!
- IE6 prend en charge la frontière du modèle de boîte, mais pas le W3C modèle de boîte. IE7 prend en charge le W3C modèle de boîte, mais pas de la frontière du modèle de boîte. IE8+ support à la fois, et vous pouvez choisir entre eux. À l'appui de IE7, utilisez l'une des solutions ci-dessus. Si vous êtes heureux de déposer IE7, utiliser box-sizing:border-box.
- Je viens de lire quelque part que .content > * devrait être évitée, car il est plutôt lent (au contraire de simplement l' * sélecteur de lui-même).
- .contenu > * est plus lent, mais il est extrêmement peu probable que votre sélecteurs CSS sera le goulot d'étranglement. Nous parlons millisecondes ici.
InformationsquelleAutor superluminary
17

Vous pouvez utiliser un polyfill pour le faire fonctionner sur certains points, il n'a pas fonctionné pour mon champs de saisie si.

https://github.com/Schepp/box-sizing-polyfill
```
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
```
Il suffit de noter que le comportement de l'url est relative à la page et ne pas le fichier css. Utiliser des chemins relatifs à la racine du site (début de l'url avec une barre oblique, puis à partir de là).
- J'ai utilisé pour boxsizing.htc, mais il idiopathically interfère avec la page JS
- Publié sous la LGPL, ne convient pas pour les projets commerciaux.
- La LGPL n'interdit pas d'utilisation commerciale. Il vous demande seulement de distribuer un peu de code. Je trouve exceptionnellement peu probable qu'un tribunal votre code côté serveur doit être publié en tant que résultat de l'exécution de code LGPL sur une machine différente dans le navigateur de l'utilisateur.
- Je dirais Url par rapport à la racine du site, une URL absolue peut ressembler à quelque chose comme ceci mydomain.com/css/micss.css
- Je suis d'accord, édité (après une longue période).
InformationsquelleAutor neojp

Vous devez vous connecter pour publier un commentaire.

1. Les Commentaires Conditionnels:

2. Le Schepp Boîte De Dimensionnement Polyfill:

3. De Style Ancien Divs Imbriqués:

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

5. Pensez à supprimer IE7 soutien