Recentemente, eu estava construindo um novo site para mim e descobri alguns efeitos, mas encontrei alguns pequenos problemas durante a implementação, como este bloco embutido. Felizmente, a maioria dos problemas foi resolvida, então os escrevi para compartilhar.
Quando estamos criando páginas da web, às vezes queremos que um elemento seja capaz de definir largura e altura como um bloco, e também seja capaz de rodar continuamente como um inline normal. Por exemplo, o local marcado pela linha vermelha na imagem abaixo:
Normalmente usamos código como este para obter esse efeito:
Exemplo de código-fonte
[www.downcodes.com] Embora isso possa atingir o objetivo, o código ainda não é refinado e flexível o suficiente. De maneira ideal, podemos conseguir isso apenas com o seguinte código:
Exemplo de código-fonte
[www.downcodes.com] Nesse caso, precisamos especificar a largura, a altura e a imagem de fundo para a tag a. No entanto, o atributo de exibição padrão da tag a é embutido e a largura e a altura são inválidas. E se display:block estiver definido como a, embora o problema de largura e altura possa ser resolvido, o elemento quebrará automaticamente as linhas e não poderá obter o efeito que precisamos. Existe alguma maneira de conseguir o mesmo que a tag img, que pode definir a altura e a largura sem quebrar a linha automaticamente?
A resposta é sim. Opera e Webkit suportam uma propriedade CSS2 display: inline-block. Usando este atributo, podemos obter totalmente o efeito que precisamos no Opera, mas não funcionará em outros navegadores.
O atributo display também possui uma exibição de valor menos comumente usada: tabela inline. Usar esse valor também pode alcançar totalmente o efeito que precisamos. Esta propriedade é corretamente suportada por todos os navegadores, exceto o IE, mas... bem, o IE novamente. Embora todos os desenvolvedores web odeiem quando confrontados com CSS, desistir do IE equivale a desistir de 70% dos usuários, então ainda temos que encontrar outras soluções.
Não tive escolha a não ser pesquisar no Google e realmente encontrei. Conforme apontado neste artigo, se você primeiro acionar o hasLayout do IE e depois definir seu display: inline, esse elemento se tornará inline-block. Dessa forma, podemos aproveitar esse recurso irracional do IE e combiná-lo com algum CSS! Hacks, fornecendo códigos CSS compatíveis com vários navegadores:
Exemplo de código-fonte
[www.downcodes.com] .classe de elemento {
display: -moz-inline-stack; //código somente do Firefox
display: inline-block; //alguns navegadores padrão
zoom: 1; //apenas IE
*display: inline; //Somente o IE conhece esse código (CSS Hack)
}
Através deste código, você pode obter um bloco embutido que se comporta de forma consistente em vários navegadores. No entanto, este método tem uma pequena desvantagem, ou seja, não pode passar na verificação CSS do W3C. Claro, também é muito simples passar na verificação. Você pode emitir uma folha de estilo com o atributo inline-table para navegadores diferentes do IE e emitir um CSS separado somente para o IE.
