CSSer, como outros cargos de TI, enfrentará perguntas feitas pelo entrevistador ou testes fornecidos ao procurar emprego. Hoje coletamos 8 perguntas comuns em entrevistas, espero que sejam úteis para você.
1. O estilo de foco não aparece após clicar no hiperlink?
O estilo do hiperlink clicado não possui mais os estilos hover e ativo. A solução é alterar a ordem dos atributos CSS: LVHA.
2. Problema de bug de margem dupla do IE6
Por exemplo:
<style type="texto/css"> corpo {margem:0;} div {float:esquerda;margem-esquerda:10px largura:200px; borda:1px vermelho sólido;} </estilo> |
Depois de flutuar, a margem original é de 10px, mas o IE interpreta como 20px. A solução é adicionar display:inline;
3. Por que o texto no Firefox não consegue expandir a altura do contêiner?
Contêineres com valores de altura fixos em navegadores padrão não serão esticados como no IE6. Então, se eu quiser ter uma altura fixa e ser esticado, quais configurações devo fazer? A solução é retirar a altura e definir min-height:200px aqui, para cuidar do IE6 que não conhece min-height, pode ser definido assim:
| div { altura:auto!importante altura:200px; |
4. Por que a cor da barra de rolagem do navegador IE não pode ser definida nos padrões da web?
Configurações de estilo original:
<style type="texto/css"> corpo { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeee scrollbar-arrow-color:#000; -color:#fff; barra de rolagem-cor da sombra escura:#fff } </estilo> |
A solução é substituir o corpo por html
5. Como definir um container com altura de cerca de 1px?
Esse problema no IE6 é causado pela altura da linha padrão e há muitas soluções, como: overflow:hidden | zoom:0.08 |
6. Como fazer com que a camada seja exibida no FLASH?
A solução é definir transparência para FLASH:
| <a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1"> <param name="wmode" value="transparent" /> |
7. Como centralizar uma camada div no navegador?
<style type="texto/css"> <!-- div{ posição:absoluta; superior:50%; esquerda:50%; margem:-100px 0 0 -100px; largura:200px; altura:200px; borda: 1px vermelho sólido; } --> </estilo> |
Aqui usamos o posicionamento percentual absoluto e o método de usar valores negativos fora do patch. O tamanho do valor negativo é sua própria largura e altura dividida por dois.
8. Solução para o problema de centralização de tags div aninhadas no navegador Firefox
Suponha a seguinte situação:
<div id="a"> <div id="b"> </div> </div> |
Se você deseja centralizar b dentro de a, geralmente só precisa usar CSS para definir o atributo text-align de a para centralizar. Este método parece normal no IE, mas no Firefox, b estará à esquerda;
A solução é definir a margem horizontal de b como automática. Por exemplo, defina o estilo CSS de b como: margin: 0 auto;