मेरे पास एक लेआउट है जो वेबकिट आधारित ब्राउज़र में पूरी तरह से ठीक है लेकिन इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में लंबवत संरेखण बंद है। कोड का सबसे सरल उदाहरण है:अतिप्रवाह: छुपा; फ़ायरफ़ॉक्स में संरेखण के कारण
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>आप देखेंगे कि # content2 div # सामग्री 1 और # content3 divs के सापेक्ष को धक्का दिया है। मेरे पास इस स्थिति में फ्लोट्स पर इनलाइन-ब्लॉक का उपयोग करने का अपेक्षाकृत मजबूत कारण है, हालांकि अगर केवल "फिक्स" फ्लोट पर जाना है तो मुझे इसके साथ आगे बढ़ना होगा, हालांकि मैं उस काम से बचने के बजाय संभवतः, वर्तमान में, हमारे पायलट परीक्षण लॉन्च के लिए समय कम है, लंबी अवधि में लेआउट को फ्लोट में स्थानांतरित किया जा सकता है।
और भी, मैंने सफलता के लिए मार्जिन और पैडिंग के साथ गड़बड़ करने की कोशिश की है। उस गड़बड़ी में मैंने पाया है कि यह अतिप्रवाह की उपस्थिति है: # content2 में छिपा हुआ है जो इस लाइन-ब्रेक-एस्क्यू विरूपण का कारण बनता है।
किसी भी मदद की बहुत सराहना की।
क्या आप एक डॉक्टरेट का उपयोग कर रहे हैं? –
yup, बस इस उदाहरण में नहीं। डॉक्टर प्रकार ओएस एक्सएचटीएमएल सख्त। – Mike