Como posso fazer padrões de trabalho modo, bem como o modo de peculiaridades?

StackOverflow https://stackoverflow.com/questions/416094

Pergunta

o seguinte código HTML funciona muito bem para mim no Firefox ou IE7 / 8 (com ou sem o Tag Style) 

<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        Input.quirks
        {
            margin: 1px 0px 1px 0px;
            border: solid black 1px;
        }
    </style>
</head>
<body>
Should work in Quirks Mode <br />
    <input class="quirks" type="text" style="width: 300px;" /><br />
    <input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
    <input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>

No entanto, estou disse que a ausência de um DOCTYPE no topo da referida HTML está causando ambos ambos os navegadores para trabalhar em modo "peculiaridades".

Foi-me dito que isso é ruim.

Eu tentei várias doctypes mas não encontraram uma combinação DocType / HTML que produz um processamento correto em ambos os navegadores.

Qualquer coisa diferente do modo "Quirks" faz com que os navegadores para reagir de forma diferente para a tentativa de definir a largura de uma caixa de texto. Isto parece levar a uma posição onde eu possa corrigir minhas instruções para ambos os FF ou IE e de repente o outro irá falhar.

Alguns detalhes ...

1.> O objetivo aqui é que as 3 linhas devem parecem ser a mesma largura exatamente quando renderizado em cada browser. Não é nessecary que as larguras prestados são os mesmos em todos os navegadores, mas apenas que eles aparecem corretamente justificada / alighned dentro de cada navegador.

2.> A imagem referenciada é uma imagem espaçadora 3 pixels de largura e 1 alto (uma alternativa a este também seria bom)

3.> eu não quero introduzir tabelas, se possível.

Parece que o modo Quirks é o único modo que é consistente em todos os navegadores. Estou preocupado, porém, que a versão final do IE8 ou mesmo em algum navegador futuro, o modo de peculiaridades não será o padrão.

O que devo fazer? Como especificar um DocType (e talvez alterar a minha html), que irá criar uma aparência consistente entre os navegadores?

Foi útil?

Solução

A principal diferença entre "peculiaridades" e modo "Conformidade com as Normas" é uma "caixa modelo" diferente, que resulta em diferentes formas de calcular tamanhos com base nas configurações de largura / altura, preenchimento, margem e de fronteira. No modo de Conformidade padrão, a largura eficaz e altura de uma caixa é calculado somando todos estes parâmetros (por favor, pesquisar na web para mais detalhes).

Assim, desde que você especificar um 1px transfronteiriça, os primeiros campos de entrada será 302px de largura (300px + 2 * 1px para a fronteira esquerda e direita). A inconsistência entre FF e IE você mencionou pode ser causada por diferentes "valores padrão" para a definição "padding". Eu só testou seu código com um DOCTYPE e não rasas para os campos de entrada - ambos os navegadores prestados lo da mesma maneira

. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Agora, para as imagens espaçadoras: não usá-los. Você não precisa deles. Basta usar uma margem direita de "3px" para os campos de entrada para a abertura. 

input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

Em seguida, fazer a matemática para determinar a correta "width" configurações para que a soma de todas as larguras (estofamento includung, de fronteira e de margem!) Em cada linha são iguais, por exemplo: 

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

Observe que "5px" consiste na 3px direito margem e 2 vezes a fronteira (1px).

Lá vai você. Se você quiser usar um preenchimento diferente para um mais agradável look-and-feel, apenas incluí-lo em seus cálculos!

Outras dicas

Este é um excelente artigo sobre começar seu direito DOCTYPE:
http://www.alistapart.com/stories/doctype/

Uma vez que o problema foi causado principalmente por diferentes valores predefinidos no IE e Firefox, você pode estar interessado em uma reset de estilo CSS , que inclui valores para coisas como preenchimento, efetivamente limpando os padrões para todos os navegadores de modo que todos eles prestam semelhante.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top