IE7 Padrões elementos para 100% Largura
-
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?
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;}