O navegador que historicamente se desviou do modelo de caixa CSS padrão referente à largura foi
Internet Explorer no modo Quirks .
Aqui está o porquê:
*
Modelo de caixa padrão: No modelo de caixa CSS padrão, a propriedade `width` especifica a largura da área de conteúdo de um elemento. O preenchimento e as larguras da borda são então adicionados * na parte superior * dessa largura de conteúdo para determinar a largura total do elemento.
*
Modelo de caixa de modo de moda do Internet Explorer (também conhecido como "modelo de caixa quebrada" ou "modelo da caixa IE"): No modo Quirks, o Internet Explorer calculou a largura total de um elemento * incluindo * preenchimento e bordas. Portanto, se você definir `largura:100px; preenchimento:10px; Border:5px; `No modo Quirks, a largura * total * do elemento seria 100px e a área de conteúdo seria reduzida para acomodar o preenchimento e as bordas. Em um navegador compatível com padrões, a largura total seria 100px (conteúdo) + 20px (preenchimento) + 10px (borda) =130px.
Modo de peculiaridades O modo Pallks foi acionado em versões mais antigas do Internet Explorer (especificamente IE5.5 ou mais, e IE6 quando o documento não possuía um Doctype adequado) para renderizar as páginas da web como foram projetadas para os navegadores mais antigos. Isso foi feito para manter a compatibilidade com versões anteriores e impedir que os sites mais antigos se quebrem.
Modo de navegadores e padrões modernos Versões modernas do Internet Explorer (IE7 e mais tarde), bem como todos os outros navegadores importantes (Chrome, Firefox, Safari, Edge), padrão para
Modo Quando um doctype adequado está presente no documento HTML. No modo de padrões, eles implementam corretamente o modelo de caixa CSS padrão.
CSS `Propriedade de Box-Sizing` A propriedade CSS `Box-Sizing` fornece uma maneira de alterar o comportamento do modelo da caixa. Quando você define o `Box-Sizing:Border-box;` em um elemento, ele se comportará como o modelo de caixa de modo IE antigo. Isso geralmente é usado para simplificar os cálculos de layout e facilitar o gerenciamento de projetos responsivos.
Em resumo:Embora nenhum navegador moderno usado ativamente quebre intencionalmente o modelo de caixa padrão por padrão, entender como o Internet Explorer usado para lidar com isso no modo de peculiaridades é historicamente importante. Usando o `Box-Sizing:Border-box` é uma maneira de alcançar o comportamento" IE Box Model "intencionalmente de uma maneira compatível com navegador.
