IE6 और IE7

में इनलाइन-ब्लॉक तत्व के 100% तक चौड़ाई को सही ढंग से खींचना मेरे पास निम्न मार्कअप है, जहां मैं ऊपर की ओर शीर्षक के दाईं ओर दाईं ओर संरेखित करने के लिए दूसरी तालिका का दायां हाथ पाने का प्रयास कर रहा हूं यह। यह आईई 8, फ़ायरफ़ॉक्स और क्रोम में काम करता है, लेकिन आईई 6/7 में तालिका पृष्ठ की चौड़ाई को भरने के लिए गलत तरीके से फैली हुई है।IE6 और IE7

मैं Trip Switch hasLayout trigger का उपयोग कर रहा हूं ताकि inline-block आईई 6/7 में लागू हो सके।

क्या कोई जानता है कि कैसे (या यहां तक कि अगर) केवल आईई 6/7 में inline-block के साथ प्रदर्शित रैपर तत्व की प्राकृतिक चौड़ाई को भरने के लिए तालिका प्राप्त कर सकता है?

आप http://jsbin.com/uyuva पर लाइव कोड चल रहे देख सकते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style> 
.wrapper { 
    display: inline-block; 
    border: 1px solid green; 
} 
/* 
display: inline-block triggers the wrapper element to have layout for IE 6/7. 
The trip switch then provides the inline component of the display behaviour. 
See http://www.brunildo.org/test/InlineBlockLayout.html for more details. 
*/ 
.wrapper { 
    *display: inline; 
} 

table { 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<h1>No width on table:</h1> 
<div class="wrapper"> 
    <h2>The right hand side of the table doesn't stretch to the end of this heading</h2> 
    <table><tr><td>foo</td></tr></table> 
</div> text 

<h1>Width on table:</h1> 
<div class="wrapper"> 
    <h2>The right hand side of the table should stretch to the end of this heading</h2> 
    <table style="width: 100%"><tr><td>foo</td></tr></table> 
</div> text 
</body> 
</html>

अद्यतन: यहाँ समस्या का एक और उदाहरण है, एक तालिका का उपयोग कर और एक बिल्कुल तैनात कंटेनर तत्व का उपयोग किए बिना इस बार। आप http://jsbin.com/igila4 पर चल रहे कोड को देख सकते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style> 
div { 
    position: absolute; 
    border: 1px solid red; 
} 

input { 
    width: 100%; 
    *width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

textarea { 
    width: 400px; 
} 
</style> 
<body> 
The width of the input and textarea below should be identical.<br/> 
<div> 
    <input value="This is an input with width 100%"><br/> 
    <textarea>This is a text area with width 400px.</textarea> 
</div> 
</body> 
</html>

स्रोत

2010-04-30 Simon Lieschke

क्या आप तालिका को ऊपर से विशेष रूप से H2 की चौड़ाई से मिलान करने की कोशिश कर रहे हैं या H2 के बावजूद div.wrapper की चौड़ाई भरें? –

यदि एच 2 तालिका की प्राकृतिक चौड़ाई से व्यापक है तो मैं H2 की चौड़ाई से मेल खाने के लिए तालिका प्राप्त करने का प्रयास कर रहा हूं। यदि एच 2 प्राकृतिक तालिका चौड़ाई की तुलना में संकुचित है तो मुझे div.wrapper की चौड़ाई प्राकृतिक तालिका चौड़ाई के रूप में समाप्त होने की उम्मीद है। –

यह यह केवल सीएसएस के माध्यम से प्राप्त किया जा सकता प्रकट नहीं होता है एक अच्छा sample है।

मैंने जानबूझकर स्क्रिप्ट का उपयोग करने से परहेज किया क्योंकि मैं चौड़ाई को अद्यतन करने के लिए मैन्युअल कोड लिखने के बजाय पृष्ठ गतिशील रूप से छेड़छाड़ करने के दौरान ब्राउज़र के लाभ को प्राथमिकता देना पसंद करता हूं।

अंत में मैंने अपनी टेबल के लिए न्यूनतम चौड़ाई निर्दिष्ट करके इस मुद्दे को साइड-चरणबद्ध किया जो कि मेरे पास किसी भी शीर्षक की लंबाई से अधिक होना चाहिए।

इंटरनेट एक्सप्लोरर 6 और 7 min-width का समर्थन नहीं करते हैं, लेकिन जैसा कि मुझे सामान्य स्क्रिप्ट मिलती है जो मैं प्रदर्शित कर रहा हूं, मैं गतिशील रूप से एक अतिरिक्त thead तत्व बना देता हूं जिसमें एक एकल सेल है जो हर कॉलम को फैलाता है जो मैं शैली करता हूं प्रभावी रूप से मुझे एक ही परिणाम दे:

सीएसएस

table { 
    min-width: 600px; 
} 
th.min-width { 
    *width: 600px; 
}

HTML तालिका संरचना

<table> 
    <thead><tr><th colspan="3" class="min-width"></th></tr></thead> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
    </tbody> 
</table>

स्रोत

2010-06-23 03:04:50

यदि आप रैपर (उदाहरण के लिए 50em) पर चौड़ाई निर्धारित कर सकते हैं, तो तालिका रैपर की चौड़ाई तक विस्तारित हो जाएगी।

हालांकि, यदि आपको गतिशील रूप से विस्तृत करने के लिए रैपर की आवश्यकता है, तो आप रैपर के offsetWidth पर तालिका के width सेट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। यहां जावास्क्रिप्ट के साथ पृष्ठ जोड़ा गया है: http://jsbin.com/uyuva/5

मैंने केवल आईई 8 पर संगतता मोड चलने के साथ इसका परीक्षण किया है, क्योंकि मेरे पास आईई 6/7 नहीं है।

स्रोत

2010-05-01 18:03:48 szupie

आपको एच 2 की चौड़ाई प्राप्त करने और तालिका में लागू करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। मैं नहीं मानता कि सीएसएस संभाल कर सकते हैं कि आप क्या हर ब्राउज़र coughIEcough

में की जरूरत है यहाँ संदर्भ के लिए

स्रोत

2010-05-03 04:40:18 TheGeekYouNeed

IE6 और IE7

उत्तर

संबंधित मुद्दे