testes: ‘hasLayout’ e o comportamento encolher para conter (IE6/Win e IE7Win)

1. Listas verticais: floating <ul>, sem-layout <a>

2. Listas verticais: floating <ul>, layout <a>

3. Listas horizontais: floating <li>, layout <a>

Estilos

.testgrid ul {margin:0; padding:0; list-style:none;}
.testgrid ul a {margin:1px; display:block;}

ul.vertical {float:left; background: #cbba65; padding: 0.5em; list-style: none; } 
.nonlayout a { border: 2px solid #080; background:#dfd;} /* test 1 */
.layout a { zoom:1; border:2px solid #008; background:#ccc} /* test 2 */

ul.horizontal {padding:.5em; background; #65cbcb;} /* should not be visible */
.horizontal li {float:left; margin:2px;}
.horizontal a { height:1.5em; border:2px solid #d00; background:#ddd}

Notas

• Teste 1 – IE Windows renderiza bem, mas há um espaço extra na parte inferior da cada item da lista <li> (bug do espaço em branco nas listas).
• Teste 2 – bug do espaço em branco nas listas é corrigido, mas o elemento <ul> flutuado não mais encolhe para conter e estende-se por toda a largura disponível, porque foi aplicado ‘haslayout’ para o elemento <a>.
• Teste 3 – O elemento <a> estende-se por toda a largura disponível quando ‘haslayout’ é aplicado. O elemento <li> flutuado não mais encolhe para conter. O bloco pai (.testgrid) expande o máximo possível, fazendo aparecer uma barra de rolagem horizontal na janela do navegador.

Última modificação : 2006-04-14 12:31:48 GMT.

• [ La Chatte Noire ] área de desenvolvimento
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]