HTML/CSS: Criando uma div centralizada com uma largura de minúscula

StackOverflow https://stackoverflow.com/questions/502196

  •  20-08-2019
  •  | 
  •  

Pergunta

Eu gostaria de ter na minha página um div que está centrado e tem uma certa largura, mas que se estende além dessa largura, se exigido pelo conteúdo. Estou fazendo isso com o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .container-center {
                text-align: center;
            }
            .container-minwidth {
                min-width: 5em;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="container-center">
            <div class="container-minwidth">
                a
            </div>
        </div>
    </body>
</html>

Isso funciona muito bem no Firefox/Safari, mas não no IE6, o que não entende o display: inline-block. Algum conselho sobre como fazer isso funcionar no IE6 também?

Foi útil?

Solução

Não é uma soluções perfeitas, mas eu tive algumas questões de falta de apoio ao IE6 para a largura da min, dizendo.

<style type="text/css">            
            .container-minwidth {
                min-width: 5em;

                width: auto !important;
                width: 500px; /* IE6 ignores the !important tag */

                /* would help for expanding content if it blows past 500px; */
                overflow:auto; 

                display: inline-block;
                border: 1px solid blue;
            }        
</style>

A outra tag que pode ajudar nessa situação é a tag de transbordamento.

Outras dicas

Na verdade, Alessandro ie6 entende display: inline-block, o que não entende sobre o seu código é o min-width. Há muitos hacks para fazer isso funcionar, mas eu não recomendaria nenhum deles. Se você vai usar qualquer um deles, coloque -os em uma folha de estilo específica do IE6, para que não interfira com seus outros navegadores de reclamação mais padrão.

<style type="text/css">            
        .container-minwidth {
            min-width: 5em;
            _width: 500px;
            white-space:nowrap;

            display: inline-block;
            *display:inline;
            *zoom:1;

            border: 1px solid blue;
        }        
</style>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top