IE7 tidak mengerti tampilan: inline-block

127

Bisakah seseorang tolong bantu saya mengatasi masalah ini? Dengan Firefox berfungsi dengan baik tetapi dengan Internet Explorer 7 tidak. Sepertinya tidak mengerti 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
sumber
1
Apa yang sebenarnya harus Anda capai? Efek apa?
Iladarsda

Jawaban:

302

Retas IE7 display: inline-block;adalah sebagai berikut:

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

Secara default, IE7 hanya mendukung elemen inline-blockalami inline( Quirksmode Compatibility Table ), jadi Anda hanya perlu peretasan ini untuk elemen lain.

zoom: 1ada untuk memicu hasLayoutperilaku, dan kami menggunakan hack properti bintang untuk menetapkan displayuntuk inlinehanya di IE7 dan bawah (browser yang lebih baru tidak akan berlaku itu). hasLayoutdan inlinebersama - sama pada dasarnya akan memicu inline-blockperilaku di IE7, jadi kami senang.

CSS ini tidak akan divalidasi, dan dapat membuat stylesheet Anda berantakan, jadi menggunakan stylesheet khusus IE7 melalui komentar bersyarat bisa menjadi ide yang bagus.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
kapa
sumber
40
Saya lebih suka *zoom:1;triger hasLayout. Jadi lebih jelas bahwa *zoomdan *displaypergi bersama
yunzen
4
@RoshanWijesena w3schools tidak ada hubungannya dengan w3c dan juga tidak ada otoritas di ie7
Musa
1
@RoshanWijesena w3schools bukan sumber yang bagus dan tidak resmi sama sekali. Jangan bergantung padanya. Fakta bahwa mereka menyebutkan atau tidak menyebutkan sesuatu tidak benar-benar berarti apa-apa.
kapa
1
terima kasih kawan! jadi apa yang harus saya gunakan sebagai dokumentasi resmi hanya ingin tahu!
Roshan Wijesena
2
@RoshanWijesena Anda dapat menemukan spesifikasi standar resmi di w3.org , halaman resmi W3C. developer.mozilla.org adalah sumber yang bagus yang bisa Anda gunakan alih-alih w3schools sebagai referensi.
kapa
8

Memperbarui

Karena tidak ada yang menggunakan IE6 dan 7 lagi saya akan menyajikan solusi yang berbeda:
Anda tidak perlu hack lagi, karena IE8 mendukungnya dengan sendirinya

Bagi mereka yang harus mendukung browser zaman batu itu sebelum IE8 (Bukan berarti IE8 sudah terlalu tua, terlalu batuk ):
Untuk akun kontrol versi IE, gunakan beberapa Kelas Bersyarat dalam <html>tag seperti yang dikatakan Paul Irish dalam artikelnya.

<!--[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]-->

Dengan ini, Anda akan memiliki kelas yang berbeda dalam tag-html untuk Peramban IE yang berbeda

CSS yang Anda butuhkan adalah sebagai berikut

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

Ini akan memvalidasi dan Anda tidak perlu file CSS tambahan

Jawaban lama

.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
sumber
CSS yang Anda tunjukkan di atas masuk akal tetapi bagaimana tepatnya itu akan bekerja ke dalam HTML? Terima kasih.
StephenESC
@StephenESC dua cara. Tambahkan kelas inline-blockke frame-headerelemen. Atau ubah inline-blockoleh frame-headerpemilih CSS.
yunzen
1

IE7 tidak mendukung 'inline-block' dengan benar, lebih banyak info di sini: LINK
Gunakan dapat menggunakan: 'inline' sebagai gantinya.

Apa yang sebenarnya ingin Anda capai? Buat kami contoh dan taruh di sini: http://jsfiddle.net/

Iladarsda
sumber
0

gunakan inline, ini berfungsi dengan penyeleksi seperti ini untuk item daftar:

ul li {}

atau lebih spesifik:

ul[className or name of ID] li[className or name of ID] {}
MiddleKay
sumber
2
inlinetidak sama dengan inline-block. Misalnya, height: 25px;dalam contoh tidak akan berpengaruh ketika elemen tersebut inline. Juga, pertanyaannya tidak mengatakan apa-apa tentang daftar.
kapa