1. Esboço
Ao depurar problemas de CSS, geralmente adiciono uma borda a um elemento específico para ver exatamente o que acontece com esse elemento e ajudar a determinar a origem do problema. Isso geralmente funciona porque me dá uma visibilidade mais específica do layout. Mas se for um elemento em nível de bloco, algo pode dar errado - adicionar uma borda de 1px a qualquer elemento em nível de bloco provavelmente afetará o layout, tornando o elemento 2px mais largo.
A propriedade de contorno é um substituto perfeito porque renderiza o objeto sem afetar o fluxo do documento. No entanto, o IE6 e o IE7 não suportam o atributo outline, portanto ele não pode ser usado para depuração nesses dois navegadores.
2. Herdar (valor)
Existem muitos exemplos disso no desenvolvimento CSS: ao definir certos estilos em um elemento específico para dizer a esse elemento para "herdar" todas as propriedades adicionadas de seu elemento pai, você pode evitar uma quantidade considerável de entrada de teclado.
Isso pode ser facilmente alcançado definindo herdar. Isso pode ser útil. Por exemplo, ao substituir o atributo background, geralmente há muito texto no atributo (cor, URL da imagem, localização, etc.). Portanto, em vez de reescrever esses valores, você pode querer apenas que o elemento em questão tenha a mesma propriedade background que seu pai, e um valor herdado resolverá o problema - obviamente, economizando muita digitação no teclado.
Infelizmente, valores herdados não são suportados no IE6 e IE7 (exceto para direção (direção do texto) e propriedades de visibilidade).
3. Células Vazias
Este atributo é utilizado apenas para tabelas ou elementos cujo atributo "display" esteja definido como "table-cell". Se você adicionar conteúdo dinamicamente a uma tabela, poderá encontrar uma situação em que o conteúdo de uma determinada célula esteja vazio e você não deseja que a borda, a cor de fundo, a imagem de fundo, etc. dessa célula vazia sejam ocultadas.
Usar "células vazias: ocultar" pode resolver esse problema, ocultando completamente as células onde essa situação pode ocorrer.
O Internet Explorer não oferece suporte ao atributo de células vazias.
4. Lado da legenda
Falando em atributo de tabela, este atributo é utilizado para declarar o título da tabela que é exibido na coluna lateral da tabela. Aceita quatro valores: superior, inferior, esquerda e direita. O Internet Exporer não suporta este atributo, o título da tabela sempre aparecerá no topo da tabela no IE6 e IE7.
5. Contra-incremento/contra-reset
Uma lista ordenada (
) é muito conveniente porque evita o trabalho de adicionar números incrementais manualmente e permite alterar a sequência da lista sem alterar os números.
CSS possui propriedades de contra-incremento e contra-redefinição, que permitem gerar automaticamente números incrementais em quase qualquer elemento HTML, semelhante a uma lista ordenada.
Mas o IE6, o IE7 e até o Safari (até a versão 3.x) não suportam essas propriedades. É claro que o IE6 também não suporta o pseudoelemento :before.
6. Altura mínima
Às vezes, o design ou estrutura de layout de um site requer uma área de conteúdo com altura fixa, caso contrário, um certo efeito visual é perdido. Isso pode ser por causa de um fundo gradiente, uma lista suspensa exclusiva ou talvez por causa de um efeito de brilho legal que sai do Photoshop. Mas às vezes há muito conteúdo na página, mas a página não pode ser expandida conforme o esperado.
Neste momento, você precisa usar o atributo min-height, porque ele pode dizer ao navegador para renderizar a altura mínima em um elemento específico no nível do bloco, independentemente de a altura real do conteúdo atingir essa altura mínima. Então, se o conteúdo exceder a altura mínima, o elemento se expandirá adequadamente.
A única coisa a observar sobre o uso de min-height é que ele não é compatível com o IE6. Todos sabemos que o IE6 está (lentamente) morrendo, mas alguns clientes ainda podem exigir que seus sites suportem esse maldito navegador.
A boa notícia é que o IE6 renderiza o valor da altura exatamente da mesma forma que outros navegadores renderizam "min-height", então tudo que você precisa é de um hack específico do IE6 ou de uma folha de estilo independente para adicionar altura específica, o problema está resolvido.
O IE6 também ignora largura mínima, altura máxima e largura máxima, mas o método acima também é viável para essas propriedades.
7.: passe o mouse
Tecnicamente, :hover é apenas uma pseudoclasse, mas não é suportada no IE6 (IE7 e IE8 suportam). A pseudoclasse :hover permite adicionar qualquer estilo de passagem do mouse a um elemento. Isto é muito útil e evita (pelo menos até certo ponto) o uso de JavaScript.
Mas se o seu site precisa suportar totalmente o IE6, especialmente na China, onde o IE6 domina o céu, então você deve considerar cancelar o uso desta pseudoclasse, a menos que a tag relevante tenha um atributo "href", como a tag . E se quiser conseguir esse efeito, talvez seja necessário recorrer a javascript e estilos adicionais.
8.Exibição
A exibição geralmente é definida como um destes três valores: bloco, embutido e nenhum. "Graças" ao IE, outros valores de Display raramente são usados. Esses valores incluem bloco embutido, tabela, tabela embutida e célula de tabela, etc. Esses atributos são muito úteis para resolver alguns problemas especiais de layout.
Portanto, embora o IE suporte essas três propriedades básicas do Display, ele basicamente não oferece suporte a outras propriedades.
Na verdade, o suporte do IE8 para atributos de exibição é bastante completo. No entanto, para o atributo inline-block, o IE6/7 suporta apenas elementos que estão em linha.
Para saber mais sobre o suporte de exibição em vários navegadores, verifique aqui - Shenfei Note
9. Clipe
Esta é uma propriedade CSS interessante que pode ser útil em situações especiais. Pode ser combinado com conteúdo imprevisível e gerado dinamicamente. Simplificando, este atributo permite especificar uma área oculta em um elemento específico - também pode ser entendido como, em um elemento absolutamente posicionado, a área de exibição do elemento é cortada de acordo com determinadas configurações, e o conteúdo além desta área ficarão ocultos.
Tecnicamente falando, o atributo clip é compatível com o IE, mas suporta apenas sintaxe sem vírgula, como
div.clipped {
preenchimento: 20px;
largura: 400px;
altura: 400px;
clipe: rect(20px 300px 200px 100px);
posição: absoluta;
} O estilo acima (os atributos entre colchetes após rect não são separados por vírgulas) pode ser executado na maioria dos navegadores, mas pode não passar na validação CSS porque as instruções não são separadas por vírgulas.
10.: foco
Esta é outra pseudoclasse que precisa ser mencionada aqui, porque todos os navegadores não-IE suportam este atributo. A pseudoclasse :focus permite declarar um estilo especial que é aplicado dinamicamente a um elemento da página quando ele se torna o foco do teclado (mouse). Isso é útil em elementos de formulário porque você pode adicionar uma borda a um campo de entrada quando ele estiver selecionado.
