IE7 ekranı anlamıyor: satır içi blok

127

Birisi lütfen bu hatayı aşmama yardım edebilir mi? Firefox ile iyi çalışıyor ama Internet Explorer 7 ile değil. Anlamıyor gibi görünüyor display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}

html internet-explorer-7 css

— lanthuong
kaynak

1

Tam olarak ne elde edeceksiniz? Ne etkisi?

— Iladarsda

302

IE7 display: inline-block;hack aşağıdaki gibidir:

display: inline-block;
*display: inline;
zoom: 1;

Varsayılan olarak, IE7 yalnızca inline-blockdoğal inlineöğeleri destekler ( Quirksmode Uyumluluk Tablosu ), bu nedenle yalnızca diğer öğeler için bu hack'e ihtiyacınız vardır.

zoom: 1Tetik orada hasLayoutdavranış ve kullandığımız yıldızlı tesis kesmek ayarlanması için displayiçin inline(yani geçerli olmaz, yeni tarayıcılarda) IE7 ve alt sadece. hasLayoutve inlinebirlikte temelde inline-blockIE7'de davranışı tetikleyecektir , bu yüzden mutluyuz.

Bu CSS geçerli olmayacaktır ve stil sayfanızı her halükarda karıştırabilir, bu nedenle koşullu yorumlar yoluyla yalnızca IE7 içeren bir stil sayfası kullanmak iyi bir fikir olabilir.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— kapa
kaynak

40

*zoom:1;HasLayout tetikleyicisini tercih ederim . Öyleyse *zoomve *displaybirlikte gitmesi daha açık bir şekilde

— yunzen

4

@RoshanWijesena w3schools'un w3c ile ilgisi yok ve ie7'deki yetkililer de değil

— Musa

1

@RoshanWijesena w3schools iyi bir kaynak değil ve hiç de resmi değil. Ona güvenme. Bir şeyden bahsetmeleri ya da bahsetmemeleri aslında hiçbir şey ifade etmez.

— kapa

1

teşekkürler beyler! Öyleyse resmi bir belge olarak ne kullanmalıyım merak ediyorum!

— Roshan Wijesena

2

@RoshanWijesena Resmi standart spesifikasyonlarını W3C'nin resmi sayfası olan w3.org'da bulabilirsiniz . developer.mozilla.org referans olarak w3schools yerine kullanabileceğiniz harika bir kaynaktır.

— kapa

8

Güncelleme

Artık kimse IE6 ve 7'yi kullanmadığından farklı bir çözüm sunacağım:
Artık bir hacklemeye ihtiyacınız yok çünkü IE8 bunu kendi başına destekliyor

IE8'den önce bu taş devri tarayıcılarını desteklemesi gerekenler için (IE8 o kadar eski değil, çok öksürük ):
IE sürüm kontrolü için, makalesinde Paul Irish eyaletleri <html>gibi bazı Koşullu Sınıfları kullanın

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Bununla, farklı IE Tarayıcıları için html etiketinde farklı sınıflara sahip olacaksınız.

İhtiyacınız olan CSS aşağıdaki gibidir

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Bu geçerli olacak ve fazladan bir CSS dosyasına ihtiyacınız yok

Eski cevap

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

— yunzen
kaynak

Yukarıda gösterdiğiniz CSS mantıklı, ancak bu HTML'de tam olarak nasıl çalışır? Teşekkürler.

— StephenESC

@StephenESC iki yol. Ders ekle inline-blockiçin frame-headereleman. Veya değiştirmek inline-blocktarafından frame-headerCSS seçicileri içinde.

— yunzen

1

IE7 'inline-block'u doğru şekilde desteklemiyor, daha fazla bilgi burada: LINK
Bunun yerine' inline 'kullanabilirsiniz.

Tam olarak ne başarmaya çalışıyorsun? Bize bir örnek yapın ve buraya koyun: http://jsfiddle.net/

— Iladarsda
kaynak

0

satır içi kullanın, liste öğeleri için bu tür seçicilerle çalışır:

ul li {}

veya spesifik olmak gerekirse:

ul[className or name of ID] li[className or name of ID] {}

— MiddleKay
kaynak

2

inlineile aynı değil inline-block. Örneğin height: 25px;, örnekteki öğe, öğe olduğu zaman etkili olmayacaktır inline. Ayrıca soru, listeler hakkında hiçbir şey söylemiyor.

— kapa