satır içi satır: Firefox 4'e karşı IE 9

IE9'un neden böyle bir temel davranışı şaşırtıcı bir şekilde yorumladığına dair kafam karışık. Firefox 4 veya Chrome 11'de, div'ların beklediğim gibi yan yana göründüğünü görüyorum. IE9'da ise, diğerinin altında görünen divları görüyorum.satır içi satır: Firefox 4'e karşı IE 9

<div style='border: black solid 1px'> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

Eminim IE9 standartlara uygundur, bu yüzden neyi özlüyorum?

Herhangi bir yardım için teşekkür ederiz!

GÜNCELLEME: Vay, bu tuhaf. Daha önce DOCTYPE bildirisi yoktu. Sayfanın üst kısmına <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> eklediğim an IE9, Firefox ve Chrome gibi iyi çalışıyor. Daha önce neler olduğu hakkında bir fikrin var mı?

kaynak

2011-03-30 Alexandre

kapsayıcı 'div' Nasıl genişliğinde kullanmak zorunda (ekleyerek o benim control değildir)? – alex

Bu http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie adresinden kontrol edebilirsiniz. – sandeep

Bu örnekte, üst div 20em'den büyük olduğu sürece, bunu görebilirsiniz. garip tutarsızlık. – Alexandre

Aklıma gelen tek şey IE9 sayfanızı işlemek için (yanlış değilsem IE7'nin render motoru benzer) Uyumluluk Görünümü kullanıyor olmasıdır ... çalıştığını aşağıdaki deneyin . Uyumluluk Görünümü'nü kapatırsanız, kutuların beklendiği gibi yatay olarak yığıldığını görürsünüz.

Yalnızca IE8 ve daha yeni sürümleri display: inline-block için tam destek sahibidir. IE7 ve üzeri, varsayılan olarak (span gibi) ve diğer öğelere (li veya div gibi) dahil olmayan öğelere uygulanır. Sonuç olarak, blok öğeleriniz satır içi bloklar olarak değil de blok olarak görüntülenir.

GÜNCELLEME: Vay, bu tuhaf. Daha önce DOCTYPE bildirisi yoktu. Sayfanın üst kısmında <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> eklediğim an IE9, Firefox ve Chrome gibi iyi çalışıyor. Daha önce neler olduğu hakkında bir fikrin var mı? Eğer Doctype bildirimi eklemeden önce, IE9 quirks mode yılında render edildi: kolay

. Quirks modunda, IE yukarıdaki paragrafta açıkladığım gibi eski sürümlerinde olduğu gibi display: inline-block davranır. Bir doctype bildirimine sahip olarak, IE9 standart modda, stillerinizi beklendiği gibi işleyecek.

kaynak

2011-03-30 07:45:19 BoltClock

<div style='border: black solid 1px;display:inline'> 
    <div style='display: inline; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

kaynak

2011-03-30 06:41:25 Jitesh

Yardımlarınız için teşekkürler. Benim sorum yine de inline-block ile ilgili idi. IE9'un neden iç divları diğerinin altına yerleştirmeyi seçtiğini anlayamadım.* Inline * bloğunun temel etkisinin, blokların yeni bir satır olmadan diğerinin yanına yerleştirileceğini düşündüm. – Alexandre

Evet, IE 9 ile ilgili bazı sorunlar var ve ekran: satır içi blok. BoltClock'un açıkladığı gibi uyumluluk lebel ile önlenebilir. Sen Div side by side in one line hakkında daha fazla bulabilirsiniz inline-block

<div style='border: black solid 1px'> 
     <div style='float:left; width: 10em; height: 1em; background-color: red'> 
      block one 
     </div> 
     <div style='float:left; width: 10em; height: 1em; background-color: green'> 
      block two 
     </div> 
    </div>

: yerine ekranın sol: Benim tavsiyem şamandıra kullanmaktır.

kaynak

2012-10-17 13:56:27 Markweb

o DOCTYPE'ta olmadan çalışmaya başlamasını sağlamak için ben aşağıdaki css

<style type="text/css"> 
     #myulid li{ 
      display: inline-block; 
      width: 100px; 
      margin: 10; 
      text-align:center; 
      vertical-align: top; 
     } 
    </style> 

    <!--[if IE]> 
    <style type="text/css"> 
     /* css for IE */ 
     #myulid{ 
      display: block; 
     } 
     #myulid li{ 
      display: inline; 
     } 
    </style> 
    <![endif]-->

kaynak

2013-04-26 23:02:54 sreek

satır içi satır: Firefox 4'e karşı IE 9

cevap

İlgili konular