IE7 प्रदर्शन को नहीं समझता है: इनलाइन-ब्लॉक

127

क्या कोई मुझे इस बग के आसपास अपना सिर लाने में मदद कर सकता है? फ़ायरफ़ॉक्स के साथ अपने काम ठीक है, लेकिन इंटरनेट एक्सप्लोरर 7 के साथ नहीं। यह समझ में नहीं आता है display: inline-block;।

एचटीएमएल:

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

सीएसएस:

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

html internet-explorer-7 css

— lanthuong
स्रोत

1

क्या वास्तव में आप को प्राप्त करने के लिए? क्या असर?

— इलदर्सदा

302

IE7 display: inline-block;हैक इस प्रकार है:

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

डिफ़ॉल्ट रूप से, IE7 केवल inline-blockप्राकृतिक inlineतत्वों ( Quirksmode संगतता तालिका ) पर समर्थन करता है , इसलिए आपको केवल अन्य तत्वों के लिए इस हैक की आवश्यकता है।

zoom: 1 वहाँ ट्रिगर करने के लिए है hasLayout व्यवहार, और हम का उपयोग सितारा होटल हैक स्थापित करने के लिए displayकरने के लिए inlineIE7 और कम में केवल (नए ब्राउज़रों कि लागू नहीं होगा)। hasLayoutऔर inlineसाथ inline-blockमें IE7 में मूल रूप से व्यवहार को ट्रिगर करेगा , इसलिए हम खुश हैं।

यह CSS मान्य नहीं करेगा, और आपके स्टाइलशीट को वैसे भी गड़बड़ कर सकता है, इसलिए IE7-only स्टाइलशीट का उपयोग करके सशर्त टिप्पणियों के एक अच्छा विचार हो सकता है।

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

— KAPA
स्रोत

40

मैं *zoom:1;हैलआउट को ट्राय करना पसंद करता हूं। तो यह अधिक स्पष्ट रूप से है कि *zoomऔर*display एक साथ चलते हैं

— yunzen

4

@RoshanWijesena w3schools का w3c से कोई लेना-देना नहीं है और न ही अथॉरिटीज़ ऑन 7 हैं

— मूसा

1

@RoshanWijesena w3schools एक अच्छा संसाधन नहीं है और बिल्कुल भी आधिकारिक नहीं है। उस पर निर्भर न रहें। तथ्य यह है कि वे कुछ का उल्लेख करते हैं या नहीं करते हैं, वास्तव में कुछ भी मतलब नहीं है।

— कापा

1

धन्यवाद दोस्तों! तो क्या मैं सिर्फ एक सरकारी दस्तावेज के रूप में इस्तेमाल किया जाना चाहिए सोच रहा था!

— रोशन विजसेना

2

@RoshanWijesena आप पर सरकारी मानक विनिर्देशों पा सकते हैं w3.org , W3C की आधिकारिक पेज। developer.mozilla.org एक महान संसाधन है जिसे आप संदर्भ के रूप में w3schools के बजाय उपयोग कर सकते हैं।

— कापा

8

अपडेट करें

जैसा कि कोई भी IE6 और 7 का उपयोग नहीं करता है, मैं एक अलग समाधान पेश करूंगा:
आपको अब किसी हैक की आवश्यकता नहीं है, क्योंकि IE8 स्वयं इसका समर्थन करता है

उन लोगों के लिए जिन्हें IE8 से पहले उन पाषाण युग ब्राउज़रों का समर्थन करना चाहिए (ऐसा नहीं है कि IE8 वह पुराना है, बहुत खांसी है ):
IE संस्करण नियंत्रण के खाते के लिए, कुछ सशर्त कक्षा का उपयोग करें<html> अपने लेख में पॉल आयरिश राज्यों जैसे टैग करें

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

इसके द्वारा आपके पास अलग-अलग IE ब्राउज़र के लिए html-tag में अलग-अलग कक्षाएं होंगी

आपके द्वारा आवश्यक सीएसएस निम्नानुसार है

.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 दो तरीके। कक्षा inline-blockको frame-headerतत्व में जोड़ें । या बदलने के inline-blockद्वारा frame-headerCSS चयनकर्ताओं में।

— यंगजेन सितप

1

IE7 ठीक से 'इनलाइन-ब्लॉक' का समर्थन नहीं करता है, यहां अधिक जानकारी: लिंक
उपयोग कर सकते हैं: 'इनलाइन' के बजाय।

वास्तव में आप क्या हासिल करने की कोशिश कर रहे हैं? हमें एक उदाहरण दें और यहां डालें: 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। इसके अलावा, सवाल सूचियों के बारे में कुछ नहीं कहता है।

— कोपा