1. Esboço O estilo acima (as propriedades entre colchetes após o RET não são separadas por vírgulas) podem ser executadas na maioria dos navegadores, mas podem não passar na verificação do CSS porque a instrução não é separada por vírgulas.
Ao depurar um problema de CSS, geralmente adiciono fronteiras ao elemento especificado para ver com precisão o que acontece com o elemento e ajudar a determinar a fonte do problema. Isso geralmente é eficaz porque me dá uma visibilidade mais específica no layout. Mas se for um elemento no nível do bloco, isso pode causar alguns erros-adicionar uma borda de 1px a qualquer elemento no nível do bloco provavelmente afetará o layout, o que adicionará 2px extra à largura desse elemento.
A propriedade de esboço é uma alternativa perfeita, pois torna o objeto sem afetar o fluxo do documento. No entanto, o IE6 e o IE7 não suportam o atributo de esboço, por isso não pode ser usado para depuração nos dois navegadores.
2. Herdado (valor)
Existem muitos exemplos no desenvolvimento do CSS: "herdar" todas as propriedades adicionais de seu elemento pai, definindo certos estilos em um elemento específico, para que você possa evitar muita entrada de teclado.
Isso pode ser facilmente alcançado definindo herdado. Isso pode ser útil. Por exemplo, ao reescrever o atributo de segundo plano, muitas vezes existem muitos textos no atributo (cor, endereço da URL, localização etc.). Portanto, em vez de reescrever esses valores, você pode apenas considerar que os elementos do processo têm as mesmas propriedades em segundo plano que o elemento pai, um valor herdado pode fazer tudo - o que obviamente salva muito a entrada do teclado.
Infelizmente, os valores herdados não são suportados em IE6 e IE7 (exceto para a direção (orientação do texto) e propriedades de visibilidade).
3. Células vazias
Esta propriedade é usada apenas para elementos cuja tabela ou a propriedade "exibir" está definida como "Cell-Cell". Se você adicionar conteúdo dinamicamente a uma tabela, poderá encontrar o conteúdo vazio de uma célula e não deseja que a célula vazia seja oculta.
O uso de "células vazias: ocultar" pode resolver esse problema, que ocultará completamente as células que podem ocorrer.
O Internet Explorer não suporta o atributo de células vazias.
4. Lado da legenda
Falando do atributo da tabela, esse atributo é usado para declarar o título da tabela exibido na barra lateral da tabela. Ele aceita quatro valores: superior, inferior, esquerda e direita. O Exporer da Internet não suporta essa propriedade, o título da tabela sempre aparecerá no topo da tabela no IE6 e IE7.
5. contra-incremento / contra-reset
As listas ordenadas (<ol>) são muito convenientes porque economizam o incômodo de adicionar números incrementais manualmente e permite alterar a sequência de listas sem alterar os números.
O CSS possui propriedades contra-incrementos e contra-retenção, que permitem gerar automaticamente números incrementais em quase todos os elementos HTML, assim como o efeito de uma lista ordenada.
Mas IE6, IE7 e até Safari (até a versão 3.x) não suportam essas propriedades. Obviamente, o IE6 não suporta: antes dos pseudo-elementos.
6. Min-altura
Às vezes, o design ou o layout de um site requer uma área de conteúdo com uma altura fixa, caso contrário, os efeitos visuais específicos serão perdidos. Isso pode ser devido a um fundo gradiente, uma lista suspensa exclusiva ou pode ser devido a um efeito de brilho frio do PS. Mas, às vezes, há muito conteúdo na página, mas a página não pode ser expandida conforme o esperado.
No momento, o atributo de altura da minia precisa ser usado, pois 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á moderadamente.
A única coisa a observar com a altura da minia é que ela não é suportada no IE6. Todos sabemos que o IE6 está saindo do estágio da história (lentamente), mas alguns clientes ainda podem pedir ao site para apoiar esse maldito navegador.
Mas é bom que o IE6 renderize o valor da altura da mesma maneira que outros navegadores renderizam "Min-Hight", então você só precisa de um hack ou folha de estilo independente para o IE6 adicionar folhas de estilo específicas a esse elemento.
O IE6 também ignora a largura da minúscula, a altura máxima e a largura máxima, mas os métodos acima também são viáveis nessas propriedades.
7 .: Passe o mouse
Tecnicamente, o Hover é apenas uma pseudo-classe, mas não é suportado no IE6 (suportado pelo IE7 e IE8). O: Pseudo-classe pairar permite adicionar estilos de mouse ao elemento. Isso é muito útil e pode evitar (pelo menos até certo ponto) usando JavaScript.
No entanto, se o seu site precisar suportar totalmente o IE6, especialmente na China, onde o IE6 está cheio de poder, você deve considerar cancelar o uso dessa pseudo-classe, a menos que a tag relevante tenha um atributo "href", como a tag <a> . E se esse efeito for alcançado, pode ser necessário usar JavaScript e estilos adicionais.
8. Exibição
A tela é geralmente definida como um desses três valores: bloco, embutido e nenhum. "Graças ao IE, outros valores de exibição raramente são usados. Esses valores incluem bloco embutido, tabela, mesa embutida e células de mesa.
Portanto, embora o IE apóie essas três propriedades básicas de exibição, basicamente não suporta outras propriedades.
De fato, o suporte à propriedade do IE8 para exibição é bastante completo. No entanto, para o atributo em linha em linha, o IE6/7 suporta apenas elementos que estão embutidos.
Para saber mais sobre o suporte da Display em vários navegadores, consulte isso - Nota Shenfei
9. Clipe
Este é um atributo CSS interessante que é útil em casos especiais. Pode ser combinado com conteúdo imprevisível e gerado dinamicamente. Simplificando, essa propriedade permite especificar áreas ocultas em um elemento específico - ela também pode ser entendida como em um elemento absolutamente posicionado, a área de exibição do elemento é cortada de acordo com certas configurações, e o conteúdo além dessa área irá estar sendo escondido.
Tecnicamente falando, o atributo clipe é suportado pelo IE, mas apenas suporta sintaxe livre de vírgulas, como
Div.clipped {
preenchimento: 20px;
Largura: 400px;
Altura: 400px;
Clipe: Rect (20px 300px 200px 100px);
Posição: Absoluto;
}
10 .: Foco
Esta é outra pseudo-classe que precisa ser mencionada aqui, porque todos os navegadores que não são da AE oferecem suporte a essa propriedade. O Focus Pseudo-Class permite que você declare um estilo especial. Isso é muito útil nos elementos de formulário, porque você pode adicionar uma borda a uma caixa de entrada quando ela é selecionada.