exemplos - CSS faz a largura incluir o preenchimento?




css tags (4)

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.


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

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

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

sua turma terá largura de 1000px, em vez de 1030px. Isto é, obviamente, incrivelmente útil para qualquer um que use 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 incluir todos os itens na dimensão de largura ou altura, defina o tamanho da caixa para a caixa de 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;
}

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>

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


  • O IE costumava usar o modelo de caixa "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 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; }
    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 uma marcação válida , um bom tipo de documento e cabeçalhos apropriados, ela obedecerá ao padrão. Caso contrário, você pode forçar navegadores modernos em conformidade 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 fiz anos atrás para testar qual declaração de tamanho de caixa seu navegador suporta: http://phrogz.net/CSS/boxsizing.html

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





css