IE7 Padrões elementos para 100% Largura

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu tenho um problema realmente frustrante com um I trabalho de aplicação web em (I originalmente não escrevê-lo). Ele usa quadros para o suficiente assustadoramente layout. O problema que estou tendo é que todos os elementos com uma cor de fundo e conjunto de fronteira através de padrão CSS para largura de 100%. Eu apenas testada elementos div, elementos do parágrafo etc.

Eu removi a folha de estilo completamente e, em seguida, testou-o e eu tive o mesmo problema, por isso não é de estilo causando o problema.

Eu escrevi um teste rápido para tornar o código certeza de que não estava em conflito e usado o mesmo tipo de documento e xmlns como o nosso - Recebo o mesmo problema. Aqui está o código exemplo. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

Todas as idéias?

Foi útil?

Solução

Eu acho que isso é exigido por HTML / CSS. elementos do bloco se estendem a toda a largura a menos que haja algo para detê-los.

(FF tem o mesmo comportamento.)

Outras dicas

Não é porque o elemento tem um fundo ou uma fronteira que se expande ao máximo com o pai, é porque é um elemento de bloco. O pano de fundo ou de fronteira só faz você ver o quão grande o elemento realmente é.

O padrão de largura, na verdade, não é "100%", mas "auto". A diferença prática é que o elemento incluindo fronteiras utiliza 100% da largura, em vez da largura excluindo as fronteiras tornando-se 100% da largura (fazendo a largura incluindo fronteiras mais amplas do que do pai).

Se você não quer que o elemento de usar a largura disponível, você pode torná-lo um elemento flutuante. Em seguida, ele irá ajustar-se a ele de conteúdo. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Como Richard e BeefTurkey dizer, divs são elementos de bloco e irá preencher a largura do navegador.

Você pode usar um elemento inline, como uma extensão 

<span id="test">
    Test information!
</span>

ou adicionar um pouco de estilo ao seu div para forçá-lo a ser em linha 

div#test { display: inline; }

Do not divs padrão para 100% (de tamanho pais), porque eles são os blocos? Você pode sempre tentar alterar a visualização de linha: #test {display: inline;}

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top