Benim için çapraz tarayıcı düzeni bazı problemler çözer box-sizing: border-box CSS özelliği keşfetti.

Ben şimdi tek sorun IE 7 desteği görünmüyor. Bir destek IE 7 için hack var mı?

Bu, hiçbiri mükemmel yapmak için çeşitli yollar vardır.

Senin de dediğin gibi:

• Firefox / Opera / Safari / / IE8 box-boyutlandırma özelliği kenarlık-kutuları kullanmak için izin tanımayacağını Krom.
• IE6 eski okul (doğru mu?) kullanın border-box varsayılan olarak modeli.
• Ancak IE 7 sınır kutusu modelini geri dönmek için bir yol yok hayır yani standart modda ve CSS tanımaması box-boyutlandırma özelliği W3C doldurma kutu modelini kullanır. Eğer IE 7 (ve muhtemelen hala) destek gerekiyorsa, dört seçenekten birini kaldın:

1. Koşullu Yorumlar:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

Box-boyutlandırma IE8 ve 9, daha sonra özel ayarlar yapmak için IE 7 için kullanın. Bu seçenek sancılı olur.

2. Schepp Kutusu Boyutlandırma Dolgu:

https://github.com/Schepp/box-sizing-polyfill

Bu mükemmel Dolgu IE6 tarayıcı varsayılan davranışı değiştirir ve 7 W3C kutu modeli kullanmak için HTC bir dosyadır. Işık kullanımı için sorun değil, ama yaygın olarak kullanılan ise kendi sorunlarına neden olabilir. Dikkat ve TEST ile kullanın.

3. Eski Stil İç İçe Divs:

Eski stil iç içe div yaklaşım hala iyi bir yoldur:

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

Non-semantik iç içe div dolaylı olarak doldurma, biçimlendirme dağınık olur dezavantaj sağlar. Açıkçası satır içi stilleri kullanmak değil, onları buraya resimde iyiliği için kullanıyorum.

Eski bir atasözüAsla sabit genişlikli bir öğe üzerinde dolgu kullanınhala duruyor doğru.

4. Benim Tercih Çözüm - Doğrudan Çocuk Seçici:

Diğer taraftan bu doğrudan çocuk seçici ile yuvarlak. Bazı içeriğe sahip: sabit genişlikli bir div olduğunu varsayalım

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

Sonra elemanın direkt çocukları için sol ve sağ kenar boşlukları eklemek için bir kural yazabilirsiniz:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

Bu iç içe onlarla h1 ve p için, ama küçük bir farkla, box model bug tetiklemeden içerik div, ama 20 piksel doldurma görünüm veren katacak.

5. IE 7 desteği Bırakarak düşünün

7. box-boyutlandırma özelliği tanımama son tarayıcı. IE 7, sizden küçük bir trafik alıyorsanızolabilirdestek göndermeyi düşünün. CSS çok daha güzel olacak.

2013, bu son olarak benim tercih edilen seçenek.