CSS faz a largura include o preenchimento?

Parece que no IE, a largura inclui o tamanho do preenchimento. enquanto no FF, a largura não. Como posso fazer com que ambos se comportem da mesma maneira?

Obrigado.

  • O IE costumava usar o modelo de checkbox “border box” 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 10em largura.

  • Em contraste, todos os navegadores com padrões temem o padrão do modelo de checkbox “content-box” . Nesse modelo, a largura de um elemento não inclui preenchimento ou bordas. Por exemplo:
    #foo { width: 10em; padding: 2em; border: 1em; }
    Na verdade, será 16em largura: 10em + 2em preenchimento para cada lado, + 1em borda para cada borda.

Se você usar uma versão moderna do IE com marcação válida , um bom tipo de documento e headers apropriados, ela obedecerá ao padrão. Caso contrário, você pode forçar os navegadores modernos compatíveis com os padrões a usar “border-box” via:

 * { 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 eu fiz anos atrás para testar qual declaração de tamanho de checkbox seu navegador suporta: http://phrogz.net/CSS/boxsizing.html

Observe que o Webkit (Safari e Chrome) não suporta o modelo de checkbox de padding-box meio de qualquer declaração.

Uma regra simples é tentar evitar o uso de propriedades de preenchimento / margem e largura para o mesmo elemento. ou seja, use algo semelhante a este

 
........... ...........

Eu esbarrei nesta questão e mesmo que tenha uns dois anos de idade, eu pensei em acrescentar isso caso alguém encontre esse tópico.

O CSS3 agora tem uma propriedade de dimensionamento de checkbox. Se você definir, digamos,

 .bigbox { box-sizing: border-box; width: 1000px; border: 5px solid #333; padding: 10px; } 

sua turma terá uma largura de 1000px, em vez de 1030px. Isso é, obviamente, incrivelmente útil para quem usa borda de tamanho de pixel com divs líquidos, porque resolve um problema de outra forma insolúvel.

Melhor ainda, o box-sizing é suportado por todos os principais navegadores, exceto o IE7 e abaixo. Para include todos os itens na dimensão de largura ou altura, defina o tamanho da checkbox como borda. Para agregar outros itens à largura e / ou altura, que é o padrão, você pode definir o tamanho da checkbox como “checkbox de conteúdo”.

Não tenho certeza do estado atual da syntax 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 tive esse problema, e foi por não ter um doctype declarado. Meu favorito é:

   ...  

para aqueles que ainda teriam o problema, o jQuery forneceu duas propriedades outerWidth () e innerWitdh () para saber a largura de um object com ou sem bordas …