IE7 ไม่เข้าใจ display: inline-block

127

ใครช่วยช่วยแก้จุดบกพร่องนี้ให้ฉันหน่อยได้ไหม Firefox ทำงานได้ดี แต่กับ Internet Explorer 7 ไม่เป็นเช่นนั้น ดูเหมือนว่าจะไม่เข้าใจไฟล์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
แหล่งที่มา

1

คุณจะบรรลุอะไรกันแน่? ผลกระทบอะไร?

— Iladarsda

302

display: inline-block;แฮ็คIE7 มีดังนี้:

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

ตามค่าเริ่มต้น IE7 รองรับเฉพาะองค์ประกอบinline-blockตามธรรมชาติinline( ตารางความเข้ากันได้ของโหมด Quirksmode ) ดังนั้นคุณต้องใช้แฮ็คนี้สำหรับองค์ประกอบอื่น ๆ เท่านั้น

zoom: 1จะมีการทริกเกอร์hasLayoutพฤติกรรมและเราใช้สับคุณสมบัติดาวสำหรับการตั้งค่าdisplayการinlineเฉพาะใน IE7 และล่าง (เบราว์เซอร์รุ่นใหม่จะไม่ใช้นั้น) hasLayoutและinlineโดยพื้นฐานแล้วจะกระตุ้นinline-blockพฤติกรรมใน IE7 ดังนั้นเราจึงมีความสุข

CSS นี้จะไม่ตรวจสอบความถูกต้องและอาจทำให้สไตล์ชีทของคุณยุ่งเหยิงได้ดังนั้นการใช้สไตล์ชีตเฉพาะ IE7 ผ่านความคิดเห็นแบบมีเงื่อนไขอาจเป็นความคิดที่ดี

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

— Kapa
แหล่งที่มา

40

ฉันชอบ*zoom:1;triger hasLayout ดังนั้นจึงชัดเจนมากขึ้นว่า *zoomและ*displayไปด้วยกัน

— yunzen

4

@RoshanWijesena w3schools ไม่มีส่วนเกี่ยวข้องกับ w3c และไม่มีหน่วยงานใดใน ie7

— Musa

1

@RoshanWijesena w3schools ไม่ใช่แหล่งข้อมูลที่ดีและไม่เป็นทางการเลย ไม่ต้องพึ่งมัน การที่พวกเขาพูดถึงหรือไม่พูดถึงบางสิ่งนั้นไม่ได้มีความหมายอะไรเลย

— kapa

1

ขอบคุณเพื่อน! แล้วฉันควรใช้อะไรเป็นเอกสารทางการแค่สงสัย!

— Roshan Wijesena

2

@RoshanWijesena คุณสามารถค้นหาข้อกำหนดมาตรฐานอย่างเป็นทางการได้ที่w3.orgซึ่งเป็นหน้าอย่างเป็นทางการของ W3C developer.mozilla.orgเป็นแหล่งข้อมูลที่ยอดเยี่ยมที่คุณสามารถใช้แทน w3schools เป็นข้อมูลอ้างอิงได้

— kapa

8

ปรับปรุง

เนื่องจากไม่มีใครใช้ IE6 และ 7 อีกต่อไปฉันจะนำเสนอวิธีแก้ปัญหาที่แตกต่าง:
คุณไม่จำเป็นต้องแฮ็คอีกต่อไปเพราะ IE8 รองรับด้วยตัวเอง

สำหรับผู้ที่ต้องรองรับบราวเซอร์ยุคหินก่อน IE8 (ไม่ใช่ว่า IE8 จะเก่าขนาดนั้นนะไอ ):
สำหรับบัญชีของ IE version control ให้ใช้ Conditional Class ใน<html>tag เช่น Paul Irish States ในบทความของเขา

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

ด้วยสิ่งนี้คุณจะมีคลาสต่างๆใน html-tag สำหรับเบราว์เซอร์ IE ที่แตกต่างกัน

CSS ที่คุณต้องการมีดังนี้

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

สิ่งนี้จะตรวจสอบความถูกต้องและคุณไม่จำเป็นต้องมีไฟล์ CSS เพิ่มเติม

คำตอบเก่า

.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
แหล่งที่มา

CSS ที่คุณแสดงข้างต้นมีเหตุผล แต่มันจะทำงานกับ HTML ได้อย่างไร? ขอบคุณ

— StephenESC

@StephenESC สองทาง เพิ่มคลาสinline-blockในframe-headerองค์ประกอบ หรือเปลี่ยนinline-blockโดยframe-headerในตัวเลือก CSS

— yunzen

1

IE7 ไม่รองรับ 'inline-block' อย่างถูกต้องข้อมูลเพิ่มเติมที่นี่: LINK การ
ใช้งานสามารถใช้: 'inline' แทน

คุณพยายามบรรลุอะไรกันแน่? ทำให้เราเป็นตัวอย่างและวางไว้ที่นี่: http://jsfiddle.net/

— Iladarsda
แหล่งที่มา

0

ใช้อินไลน์มันทำงานร่วมกับตัวเลือกประเภทนี้สำหรับรายการ:

ul li {}

หรือเฉพาะเจาะจง:

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

— MiddleKay
แหล่งที่มา

2

inlineไม่เหมือนกับinline-block. ยกตัวอย่างเช่นในตัวอย่างจะไม่ได้มีผลบังคับใช้เมื่อองค์ประกอบคือheight: 25px; inlineนอกจากนี้คำถามยังบอกว่าไม่มีอะไรเกี่ยวกับรายการ

— kapa