Hoy en día, el problema del modelo de caja de Internet Explorer no es un problema. La mayoría de los desarrolladores web colocan una <!DOCTYPE>etiqueta para exigir el cumplimiento de los estándares, y ya a nadie le importa realmente soportar Internet Explorer 5.5.
Sin embargo, algunos desarrolladores han presentado argumentos subjetivos y conceptuales en defensa del modelo de caja de IE. Afirmaron que el modelo de caja IE es más "intuitivo" que el modelo W3C, porque el modelo W3C mide el contenido de la caja, mientras que el modelo IE mide la caja misma:
Puedo ver su punto de vista, pero es básicamente un argumento subjetivo, y lo más importante es el cumplimiento de las normas.
Sin embargo, recientemente he llegado a preferir el modelo de caja IE por razones prácticas serias . El modelo de caja W3C dificulta el cambio dinámico del tamaño de un elemento al ancho exacto de píxeles en pantalla de otro elemento. La razón es que la style.widthpropiedad de un elemento no tiene en cuenta el tamaño total en pantalla del elemento: también debe tener en cuenta cualquier borde y relleno adicionales. Esto no es un problema si ambos elementos usan la misma clase CSS, pero si tienen diferentes clases CSS, esto puede ser increíblemente desafiante.
Supongamos que tenemos dos divs: A y B. A está codificado en el html como un div de 400px, mientras que B se crea dinámicamente usando Javascript. Visualmente, queremos que B sea el ancho exacto de A. Según el antiguo modelo de IE Box, esto es trivial. Simplemente decimos: B.style.width = A.style.widtho incluso B.style.width = A.offsetWidth + "px".
Pero con el modelo de caja W3C, esto no es tan simple. Ahora también tenemos que preocuparnos por las hojas de estilo. Si B tiene la misma clase CSS que A, solo podemos decir B.style.width = A.style.width. Pero si no es así, y es posible que no lo deseemos por razones estéticas, estamos en problemas. Ahora tenemos que tener en cuenta el total de píxeles en el borde y el relleno de A y B. Esto puede ser particularmente difícil si el borde y el relleno se especifican en unidades inconsistentes (una ocurrencia común ya que el borde es a menudo una línea de 1 px, mientras que el relleno podría especificarse en ems). Luego nos enfrentamos con la tarea casi imposible de convertir a una unidad común (em a px o px a em). Todo esto solo para que dos divs se alineen exactamente en la pantalla.
Básicamente, el modelo de caja W3C nos obliga a tener en cuenta los problemas de borde y relleno de CSS cuando establecemos el tamaño de un elemento, mientras que el modelo de caja IE no lo hace, ya que el ancho mide todo el tamaño de la caja (de extremo a -end), en lugar del contenido de la caja. Esto hace que sea mucho más fácil dimensionar elementos dinámicamente en relación entre sí.
Todo esto parece una razón bastante poderosa para favorecer el modelo de caja IE sobre el modelo W3C (al menos conceptualmente, por supuesto, en la práctica, el modelo de caja IE está muerto).
Pregunta : ¿Por qué el W3C eligió este modelo de caja? ¿Hay algunas ventajas del modelo de caja W3C que simplemente no estoy viendo? ¿O simplemente estoy exagerando el problema aquí?