मैं केवल फ्लोट्स का उपयोग करके एक वेबसाइट विकसित कर रहा हूं और फ्लेक्सबॉक्स और सीएसएस ग्रिड जैसे कोई आधुनिक सीएसएस नहीं है ताकि मैं अधिकतम ब्राउज़रों का समर्थन कर सकूं। पंक्तियों और स्तंभों में अपनी सामग्री को स्टाइल करने के लिए मैं जिस मार्कअप का उपयोग करता हूं वह कुछ इस तरह दिखता है:

<div class = "row"> 
  <div class = "col-1-of-3">[Content]</div>
  <div class = "col-1-of-3">[Content]</div>
  <div class = "col-1-of-3">[Content]</div>
</div>

मैं "पंक्ति" और "कॉल" के लिए कस्टम कक्षाओं का उपयोग कर रहा हूं और बूटस्ट्रैप इत्यादि जैसे किसी अन्य विक्रेता सीएसएस का उपयोग नहीं कर रहा हूं। फ़ायरफ़ॉक्स और क्रोम में सभी चौड़ाई सही हैं लेकिन एज और इंटरनेट एक्सप्लोरर में, कभी-कभी विंडो का आकार बदलते समय चौड़ाई सही नहीं होती है। मैंने इस मुद्दे को प्रदर्शित करने के लिए एक साधारण एक लाइन हेडर बनाया है। मैं कोडपेन पर समस्या को दोहरा नहीं सकता, इसलिए मेरे पास यह लिंक है।

यह फ़्लोट्स के साथ एक साधारण 3 कॉलम लेआउट है। जब आप क्रोम और फ़ायरफ़ॉक्स में अपनी विंडो का आकार बदलते हैं, तो चौड़ाई को सही ढंग से समायोजित किया जाता है लेकिन एज और इंटरनेट एक्सप्लोरर में, विंडो का आकार बदलते समय लगातार गड़बड़ होती है और कॉलम लेआउट टूट रहा है।

0
Shayaan 16 नवम्बर 2019, 17:13

1 उत्तर

सबसे बढ़िया उत्तर

आप रेम और कैल्क () का उपयोग करते हैं, इन प्रॉप्स को caniuse से जांचें

उदाहरण के लिए IE 11 में कैल्क के लिए आंशिक समर्थन है ()

0
zemil 16 नवम्बर 2019, 17:20