Hoje, o problema do modelo de caixa do Internet Explorer não é um problema. A maioria dos desenvolvedores da Web coloca uma <!DOCTYPE>marca para impor a conformidade com os padrões e ninguém mais se importa em dar suporte ao Internet Explorer 5.5.
No entanto, alguns desenvolvedores apresentaram argumentos conceituais subjetivos em defesa do modelo de caixa do IE. Eles alegaram que o modelo de caixa do IE é mais "intuitivo" que o modelo W3C, porque o modelo W3C mede o conteúdo da caixa, enquanto o modelo IE mede a própria caixa:
Eu posso ver o ponto de vista deles, mas é basicamente um argumento subjetivo, e o mais importante é a conformidade com os padrões .
No entanto, recentemente passei a preferir o modelo de caixa do IE por razões práticas sérias . O modelo de caixa do W3C dificulta o redimensionamento dinâmico de um elemento para a largura exata de pixel na tela de outro elemento. O motivo é que a style.widthpropriedade de um elemento não leva em consideração o tamanho total da tela do elemento: você também precisa levar em consideração qualquer borda e preenchimento adicionais. Isso não é um problema se os dois elementos usarem a mesma classe CSS - mas se eles tiverem classes CSS diferentes , isso pode se tornar incrivelmente desafiador.
Suponha que tenhamos duas divs: A e B. A é codificada no html como uma div de 400px, enquanto B é criado dinamicamente usando Javascript. Visualmente, queremos que B tenha a largura exata de A. No modelo antigo do IE Box, isso é trivial. Simplesmente dizemos:, B.style.width = A.style.widthou mesmo B.style.width = A.offsetWidth + "px".
Mas com o modelo de caixa W3C, isso não é tão simples. Agora também precisamos nos preocupar com folhas de estilo. Se B tem a mesma classe CSS que A, podemos apenas dizer B.style.width = A.style.width. Mas se não - e talvez não desejemos por razões estéticas - estamos com problemas. Agora, precisamos levar em consideração o total de pixels na borda e no preenchimento de A e B. Isso pode ser particularmente difícil se a borda e o preenchimento forem especificados em unidades inconsistentes (uma ocorrência comum, já que a borda geralmente é uma linha de 1 px, enquanto o preenchimento pode ser especificado em ems). Em seguida, somos confrontados com a tarefa quase impossível de converter em uma unidade comum (em para px ou px para em). Tudo isso apenas para obter duas divs para alinhar exatamente na tela.
Então, basicamente, o modelo de caixa do W3C nos obriga a levar em consideração os problemas de borda e preenchimento de CSS quando definimos o tamanho de um elemento, enquanto o modelo de caixa do IE não, uma vez que a largura mede o tamanho inteiro da caixa (de ponta a ponta). -end), em vez do conteúdo da caixa. Isso facilita muito o dimensionamento dinâmico de elementos em relação um ao outro.
Tudo isso parece ser uma razão bastante poderosa para favorecer o modelo de caixa do IE sobre o modelo W3C (pelo menos conceitualmente - é claro que na prática o modelo de caixa do IE está morto).
Pergunta : Por que o W3C escolheu este modelo de caixa? Existem algumas vantagens do modelo de caixa W3C que simplesmente não estou vendo? Ou estou simplesmente exagerando o problema aqui?