esboço CSS usando fronteira CSS

Question

Infelizmente, esboço CSS não é suportado no IE7, então eu estou preso usando fronteira. Mas a adição de uma borda a qualquer elemento na página ocupa espaço e, possivelmente, desloca a página.

Se eu estou adicionando uma fronteira 2px, então eu definir uma margem -2px, ele Sill não é perfeito, como os itens da lista mover para a esquerda, e. "Margin: auto" realmente parafusos com ele

Você pode ver exemplos aqui:

http://paul.slowgeek.com/nodeSelector/tests/simple.html

http://paul.slowgeek.com/nodeSelector/tests/center1.html

Por exemplo, se uma página teve:

<div>
    <p>Lorem Ipsum</p>
</div>

E então eu fiz:

<div>
    <p style="border: 5px solid red">Lorem Ipsum</p>
</div>

A página agora seria 10 px maior e o elemento p seria 5 pixels recuados. Mas se eu fiz:

<div>
    <p style="outline: 5px solid red">Lorem Ipsum</p>
</div>

no Firefox 3, a página seria exatamente a mesma altura e o elemento estaria na mesma posição. Eu quero esse comportamento para trabalhar cross browser.

Basicamente, como você pode usar uma borda CSS para obter o efeito de um esboço CSS?

Answer 1

Se for efeitos de foco que você está preocupado, e seu fundo é de cor uniforme, em seguida, basta definir a fronteira não pairar ot os elementos para a cor de fundo, e depois é só mudar a cor em foco. Assim, o elemento é sempre o mesmo tamanho, embora você terá que diminuir o preenchimento para ajustar para a fronteira sempre estar lá.

para em vez de

a p {padding: 10px;}
a:hover {border: 5px solid red;}

uso

a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}

Como um aparte, se você estiver usando: hover em qualquer elemento diferente de um link ou uma entrada, em seguida, nenhum efeito será visto no IE6, que muitas pessoas ainda usam. Mas você pode usar o script IE7 para correção: http://code.google.com/ p / ie7-js /