Internet Explorer modelo de caixa bug - Internet Explorer box model bug

A diferença em como largura é interpretado entre o W3C e modelos de caixa do Internet Explorer

O Internet Explorer modelo de caixa bug refere-se à maneira em que as versões anteriores do Internet Explorer lidar com o modelo de caixa ou dimensionamento de elementos em uma página da web, o que difere da forma padrão recomendado pelo W3C para o Cascading Style Sheets idioma. A partir do Internet Explorer 6 , o navegador suporta um modo de processamento alternativa (o chamado "modo compatível com os padrões") que resolve esta discrepância. No entanto, por razões de compatibilidade com versões anteriores, todas as versões ainda se comportam da maneira usual, não-padrão por padrão (ver modo de peculiaridades ). Internet Explorer para Mac não é afetado por esse comportamento não-padrão.

fundo

Cascading Style Sheets
comparações
web design

A especificação Cascading Style Sheets (CSS) descreve como elementos de páginas da web são exibidos por navegadores gráficos. Seção 4 da especificação CSS1 define um "modelo de formatação" que dá-elementos, tais como a nível de bloco pe blockquote-a largura e altura, e três níveis de caixas que o rodeiam: preenchimento, bordas e margens. Embora a especificação nunca usa o "termo modelo de caixa " explicitamente, o termo tornou-se amplamente utilizado por desenvolvedores web e fornecedores de navegadores web.

Antes de HTML 4 e CSS, muito poucos elementos HTML suportadas tanto fronteira e estofamento, então a definição da largura e altura de um elemento não foi muito controversa. No entanto, variar dependendo do elemento. O atributo width HTML de uma tabela definida a largura da mesa, incluindo a sua fronteira. Por outro lado, o atributo largura HTML de uma imagem definida a largura da própria imagem (dentro de qualquer fronteira). O único elemento para apoiar estofamento nos primeiros dias era a célula da tabela. Largura para a célula foi definida como "a largura sugerida para um conteúdo de células em pixels, excluindo o preenchimento da célula."

Em 1996, CSS introduzido margem, borda e preenchimento para muitos mais elementos. É adoptada uma largura definição em relação ao conteúdo, fronteira, margem e enchimento semelhante ao de uma célula da tabela. Este se tornou conhecido como o modelo de caixa W3C .

Na época, muito poucos fabricantes de navegadores implementado o modelo de caixa W3C ao pé da letra. Os dois principais navegadores da época, Netscape 4.0 e Internet Explorer 4.0 a largura definida e altura que a distância de uma fronteira para. Isto tem sido referido como o tradicional ou o modelo de caixa Internet Explorer .

Erro

De acordo com a especificação CSS1, divulgado pela World Wide Web Consortium (W3C) em 1996 e revisto em 1999, quando uma largura ou altura é especificado explicitamente para qualquer elemento de nível de bloqueio, este deve determinar apenas a largura ou altura do elemento visível , com o preenchimento, bordas e margens aplicadas depois. Internet Explorer em " modo quirks " inclui o conteúdo, preenchimento e fronteiras dentro de uma largura ou altura especificada; isso resulta em um processamento mais estreita ou mais curto de uma caixa que resultaria seguindo o comportamento padrão.

soluções alternativas

Internet Explorer versões 6 e em diante não são afetados pelo erro se a página contém certas HTML declarações de tipo de documento . Estas versões manter o comportamento de buggy quando em modo quirks por razões de compatibilidade com versões anteriores. Por exemplo, o modo de peculiaridades é acionado:

  • Quando a declaração de tipo de documento está ausente ou incompleta;
  • Quando um HTML 3 ou anterior documento for encontrado;
  • Quando um 4.0 Transitional ou Frameset declaração de tipo de documento HTML é usado e um identificador do sistema (URI) não está presente;
  • Quando um comentário SGML ou outro conteúdo não reconhecida aparecer antes da declaração de tipo de documento
  • Internet Explorer 6 também usa o modo de peculiaridades se houver um XML declaração prévia à declaração do tipo de documento.

Várias soluções foram concebidas para forçar o Internet Explorer versões 5 e anteriores para exibir páginas da Web usando o modelo de caixa W3C. Estas soluções geralmente explorar bugs não relacionados no processamento seletor CSS do Internet Explorer para esconder certas regras do browser. A mais conhecida destas soluções é o "modelo de caixa de corte", desenvolvido pela Tantek Çelik , um ex-funcionário da Microsoft que desenvolveu essa idéia, enquanto trabalhava em Internet Explorer para o Macintosh. Trata-se de especificar uma declaração de largura para o Internet Explorer para Windows, e em seguida, substituindo-lo com outra declaração de largura para navegadores de CSS-compliant. Esta segunda declaração está oculto de Internet Explorer para Windows, explorando outros erros na maneira que ele analisa regras CSS. A implementação destas CSS "hacks" foi ainda mais complicada pelo lançamento público do Internet Explorer 7, que teve alguns problemas corrigidos, mas não outros, fazendo com que resultados indesejados em páginas que utilizam estes hacks.

Hacks modelo Box têm provado pouco confiáveis, porque dependem de bugs no suporte CSS navegadores que podem ser corrigidos em versões posteriores. Por esta razão, alguns desenvolvedores da Web têm, em vez recomendado quer evitar especificando a largura e preenchimento para o mesmo elemento ou usar comentário condicional e / ou filtros CSS para contornar o modelo de caixa bug em versões mais antigas do Internet Explorer.

Suporte para o modelo caixa do Internet Explorer

Web designer Doug Bowman disse que o modelo original caixa Internet Explorer representa uma abordagem melhor, mais lógico. Peter-Paul Koch dá o exemplo de uma caixa física, cujas dimensões sempre se referem ao próprio caixa, incluindo potencial de preenchimento, mas nunca o seu conteúdo. Ele diz que este modelo de caixa é mais útil para designers gráficos, que criam projetos com base na largura visível de caixas em vez do que a largura do seu conteúdo. Bernie Zimmermann diz que o modelo de caixa Internet Explorer está mais perto da definição das dimensões celulares e estofamento utilizadas no modelo de tabela HTML.

O W3C tem incluído uma propriedade "de dimensionamento de caixa" em CSS3. Quando box-sizing: border-box;é especificado para um elemento, qualquer acolchoamento ou borda do elemento é puxado para dentro da largura e altura especificada, "como geralmente implementada por agentes de utilizador legados HTML". Internet Explorer 8 , WebKit navegadores como Apple Safari 5.1+ e Google Chrome , Gecko baseados em navegadores como o Mozilla Firefox 29.0 e mais tarde, Opera 7.0 e posterior, e Konqueror 3.3.2 e posteriores suportam a propriedade CSS3 box-sizing. Gecko navegadores anterior de 29,0 suporte a mesma funcionalidade usando o navegador-específicos -moz-box-sizingpropriedade. border-boxé o modelo de caixa padrão usado no quadro Bootstrap .

Referências

links externos