Parece que no IE, a largura inclui o tamanho do preenchimento. enquanto em FF, a largura não. Como posso fazer com que ambos se comportem da mesma maneira?
Obrigado.
Respostas:
O IE costumava usar o modelo de caixa de " caixa de borda" mais conveniente, mas não padrão . Nesse modelo, a largura de um elemento inclui o preenchimento e as bordas. Por exemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
seria 10emlargo.
Por outro lado, todos os navegadores que respeitam os padrões assumem como padrão o modelo de caixa " caixa de conteúdo" . Nesse modelo, a largura de um elemento não inclui preenchimento ou bordas. Por exemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
será realmente 16emlargo: 10em+ 2empreenchimento para cada lado, + 1emborda para cada borda.
Se você usar uma versão moderna do IE com marcação válida , um bom doctype e cabeçalhos apropriados, ela seguirá o padrão. Caso contrário, você pode forçar os navegadores modernos compatíveis com os padrões a usar a "caixa de borda" através de:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
A primeira declaração é necessária para o Opera, a segunda é para o Firefox, a terceira é para o Webkit e o Chrome.
Aqui está um teste simples que fiz anos atrás para testar qual declaração de tamanho de caixa o seu navegador suporta: http://phrogz.net/CSS/boxsizing.html
Observe que o Webkit (Safari e Chrome) não suporta o padding-boxmodelo de caixa por meio de qualquer declaração.
Uma regra simples é tentar evitar o uso da propriedade padding / margin e width para o mesmo elemento. ou seja, use algo semelhante a este
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>
Eu me deparei com essa pergunta e, embora tenha alguns anos, pensei em adicionar isso caso alguém se depare com esse segmento.
CSS3 agora tem uma propriedade de tamanho de caixa. Se você definir, digamos,
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}
sua classe terá 1000 px de largura, em vez de 1030px. Naturalmente, isso é incrivelmente útil para quem usa borda do tamanho de pixels com divs líquidos, porque resolve um problema insolúvel.
Melhor ainda, o tamanho da caixa é suportado por todos os principais navegadores, exceto o IE7 e abaixo. Para incluir todos os itens na dimensão largura ou altura, defina o tamanho da caixa como caixa da borda. Para agregar outros itens à largura e / ou altura, que é o padrão, você pode definir o tamanho da caixa como "caixa de conteúdo".
Não tenho certeza do estado atual da sintaxe do navegador, mas ainda incluo os prefixos -moz e -webkit:
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Você tem um doctype declarado? Quando comecei a codificar html, eu tinha esse problema e era por não ter um doctype declarado. Meu favorito é:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>