Aujourd'hui, le problème du modèle de boîte d'Internet Explorer est principalement un problème. La plupart des développeurs Web placent une <!DOCTYPE>
balise pour faire respecter les normes, et plus personne ne se soucie vraiment de la prise en charge d'Internet Explorer 5.5.
Cependant, certains développeurs ont proposé des arguments conceptuels subjectifs pour défendre le modèle de boîte IE. Ils ont affirmé que le modèle de boîte IE est plus "intuitif" que le modèle W3C, car le modèle W3C mesure le contenu de la boîte, tandis que le modèle IE mesure la boîte elle-même:
Je peux voir leur point de vue, mais c'est essentiellement un argument subjectif, et le plus important est la conformité aux normes.
Cependant, récemment, je suis venu à préférer le modèle de boîte IE pour de sérieuses raisons pratiques . Le modèle de boîte W3C rend difficile le redimensionnement dynamique d'un élément à la largeur exacte de pixels à l'écran d'un autre élément. La raison en est que la style.width
propriété d'un élément ne tient pas compte de la taille totale à l'écran de l'élément: vous devez également prendre en compte toute bordure et remplissage supplémentaires. Ce n'est pas un problème si les deux éléments utilisent la même classe CSS - mais s'ils ont des classes CSS différentes , cela peut devenir incroyablement difficile.
Supposons que nous ayons deux divs: A et B. A est codé en dur dans le html comme un div 400px, tandis que B est créé dynamiquement en utilisant Javascript. Visuellement, nous voulons que B soit la largeur exacte de A. Sous l'ancien modèle IE Box, c'est trivial. Nous disons simplement:, B.style.width = A.style.width
ou même B.style.width = A.offsetWidth + "px"
.
Mais avec le modèle de boîte W3C, ce n'est pas si simple. Maintenant, nous devons également nous soucier des feuilles de style. Si B a la même classe CSS que A, nous pouvons simplement dire B.style.width = A.style.width
. Mais si ce n'est pas le cas - et nous ne le voulons peut-être pas pour des raisons esthétiques - nous sommes en difficulté. Maintenant, nous devons prendre en compte le nombre total de pixels dans la bordure et le remplissage de A et B. Cela peut être particulièrement difficile si la bordure et le remplissage sont spécifiés dans des unités incohérentes (un phénomène courant car la bordure est souvent une ligne 1px, tandis que le remplissage peut être spécifié en ems). Ensuite, nous sommes confrontés à la tâche quasi impossible de convertir en une unité commune (em en px ou px en em). Tout cela juste pour que deux divisions s'alignent exactement à l'écran.
Donc, fondamentalement, le modèle de boîte W3C nous oblige à prendre en compte les problèmes de bordure CSS et de remplissage lorsque nous définissons la taille d'un élément, contrairement au modèle de boîte IE, car la largeur mesure la taille entière de la boîte (de fin à -fin), plutôt que le contenu de la boîte. Cela facilite considérablement la taille dynamique des éléments les uns par rapport aux autres.
Tout cela semble être une raison assez puissante pour favoriser le modèle box IE sur le modèle W3C (au moins conceptuellement - bien sûr, dans la pratique, le modèle box IE est mort).
Question : Pourquoi le W3C a-t-il choisi ce modèle de boîte? Y a-t-il des avantages du modèle de boîtier W3C que je ne vois tout simplement pas? Ou est-ce que j'exagère simplement le problème ici?