Sumários
Muitas das inconsistências na reprodução pelo Internet Explorer podem ser corrigidas dando a um elemento "layout". John Gallant e Holly Bergevin classificaram estas inconsistências como "erros dimensionais" querendo dizer que podem ser frequentemente resolvidos aplicando uma largura ou uma altura ao elemento. Isto leva a pergunta de porque é que o "layout" pode alterar a reprodução e as relações entre elementos. A questão, embora uma boa questão, é de difícil resposta.
Definição de hasLayout
"Layout" é um conceito proprietário do IEWin que determina como é que os elementos, em analogia com uma janela, desenham e limitam o seu conteúdo, interagindo com e relativamente a outros elementos e reagem ou transmitem eventos da aplicação/utilizador.
Os programadores da Microsoft decidiram que os elementos do tipo caixa devem ser capazes de adquirir uma propriedade (no sentido de programação orientada a objectos) a que se referem como layout, ou em alternativa, hasLayout.
hasLayout provavelmente não é nem uma propriedade nem mesmo um comportamento mas talvez um conceito de engenharia inerente à reprodução que dá uma qualidade a um elemento.
Esta qualidade de reprodução pode, de facto, ser irreversivelmente despoletada para tomar o valor true por algumas propriedades CSS e alguns elementos têm «layout» por omissão.
Nomenclatura
Dizemos que um elemento "tem layout" ou "ganha layout" quando presumimos que a propriedade da Microsoft hasLayout toma o valor true. Um elemento com layout pode ser qualquer elemento que tenha layout por omissão ou que tenha ganho layout pelo estabelecimento de propriedade CSS apropriada.
Elementos sem layout, onde hasLayout não tenha sido despoletada, por exemplo div sem dimensões podem ser ancestrais sem layout.
Dar um aplicar layout a um elemento que por omissão não o tem envolve estabelecer uma propriedade CSS que despolete hasLayout = true ao elemento em questão. Não há maneira de despoletar hasLayout = false a não ser apagar a propriedade CSS que tenha causado o inverso.
Introdução
O problema hasLayout afecta os web designer e os codificadores com todos os níveis de experiência. O Layout tem efeitos inabituais e difíceis de prever sobre o comportamento da reprodução de caixas que têm layout, assim como as implicações para os elementos seus descendentes dentro dessas caixas.
As consequência que podem resultar de um elemento ter ou não layout podem incluir:
- Muitos erros habituais em elementos flutuantes no IE;
- As caixas tratarem cercas propriedades básicas de forma diferente;
- Colapso das margens entre um contentor e os seus descendentes;
- Diferenças no posicionamento de imagens de fundo;
- Diferenças entre navegadores quando se usa scripting.
Esta lista está incompleta.
De onde é que vem o layout
Ao contrário de propriedades padronizadas, ou mesmo de propriedades CSS proprietárias disponíveis nos diversos navegadores o layout não é directamente atribuível via declaração CSS. Por outras palavras, não há propriedade layout. Alguns elementos automaticamente têm layout e é adicionado de forma invisível quando certas declarações CSS são feitas.
Elementos com layout por omissão
Os elementos seguintes parecem ter layout
- <table>
- <td>
- <body>
- <img>
- <hr>
- <input>, <select>, <textarea>, <button>
- <iframe>,
- <embed>, <object>, <applet>
- <marquee>
Propriedades
Os seguintes pares propriedade CSS/valor se aplicados permitem que um elemento ganhe layout
position: absolute- Refer-se ao seu bloco contentor e é aqui que começam alguns problemas.
float: leftoufloat:right- O elemento flutuante tem diversos detalhes devido a algunas aspectos de um elemento com layout
display: inline-block- Por vezes a cura quando um elemento é de nível em linha e necessita de layout. Aplicar layout é provavelmente o único efeito real desta propriedade. O comportamento de bloco em linha pode ser alcançado de forma independente: IEWin: bloco em linha e tem layout.
width: qq valor- Isto normalmente é uma correcção implícita, frequetemente o gatilho quando hasLayout gera erros.
height: qq valor- Por exemplo usado no Holly Hack.
zoom: qq valor- Proprietária da MS, não valida.
zoom: 1pode ser usado em depuração. writing-mode: tb-rl- Proprietária da MS, não valida.
Notas sobre elemento ao nível em linha
Para elementos em linha (sejam elementos em linha por omissão como span seja elementos com a regra CSS display: inline:
widtheheightdespoletamhasLayoutno IE5+ só em modo quirks. No IE6 em modo standard os elementos em linha ignoram as propriedades width e heigth e indicar uma largura ou altura para estes elementos não despoletará a propriedade hasLayout.zoomirá sempre despoletarhasLayoutmas não está disponível em IE5.
Elementos que tenham layout (por omissão) e display:inline comportam-se como indicado nos standards: fluem horizontalmente como palavras num parágrafo, são sensíveis ao alinhamento vertical e aplicam uma forma de envelope ao seu conteúdo. Assim que os elementos em linha tenham layout, agem como bloco em linha, e isto explica porque é que no IEWin os elementos em linha podem conter elementos de nível bloco com mesmo problemas que noutros navegadores, onde display:inline se mantem em linha.
Mensagens
Sem comentários:
Enviar um comentário