सीएसएस आईई

@Joe के रूप में calc समारोह बग अपने जवाब में बताया, समस्या IE के साथ यहां मीडिया के प्रश्नों के साथ कोई संबंध नहीं है।

इसलिए मैंने पुराने शीर्षक को अद्यतन किया है: ("मीडिया में पूछताछ जीआईआईटीएचसी") वर्तमान के साथ। (meta advice के लिए भी धन्यवाद)

बस यह सुनिश्चित करने के लिए, मैंने एक नया FIDDLE बनाया है जिसमें केवल कैल्क फ़ंक्शन है, और कम और देखें - मैं आईई में वही (बुरा) व्यवहार देखता हूं जैसा मैंने अपने मूल पहेली में किया था मीडिया प्रश्न

इसके अलावा, एक दिलचस्प अवलोकन मैंने देखा था कि यह तब होता है जब मैं कैल्क ऑपरेशन में विभाजन का उपयोग करता हूं, लेकिन अगर मैं calc(100% - x px) - जैसे कुछ आसान उपयोग करता हूं, तो यह ठीक है।

मैं media queries का उपयोग कर बॉक्स की सूची को न्यायसंगत बनाने के लिए उपयोग कर रहा हूं।

असल में, मैंने प्रत्येक #columns राज्यों के लिए एक मीडिया क्वेरी सेट की है, जहां मैं प्रत्येक तत्व (मार्जिन कॉलम को छोड़कर) पर मार्जिन-दाएं काम करने के लिए calc() का उपयोग करता हूं।

यहाँ fiddle

अब इस क्रोम और फ़ायरफ़ॉक्स में ठीक काम कर रहा है - लेकिन मैं मीडिया क्वेरी राज्यों (अस्थिर और सहित मीडिया के प्रश्नों की अवमानना करने के बीच एक गड़बड़ जब मैं IE9 +

में इस चलाने)।

यहाँ मैं क्या बात कर रहा हूँ के बारे में

[स्क्रीनशॉट 710px की ब्राउज़र विंडो की चौड़ाई में लिया] का एक स्क्रीनशॉट है:

enter image description here

इस एक IE बग है या मैंने कुछ गलत किया है ?

स्रोत

2013-05-20 Danield

ठीक:

here is a smoothly working jsfiddle of my solution

आगे गणित मैं एक कूबड़ इंटरनेट एक्सप्लोरर कुछ बेवकूफ (और क्या नया है) करने का प्रयास कर परेशानी हो रही है के लिए किया था की जांच कर रही है, और उस दशमलव मान यानी अनुमति देने के लिए था margin-left: 250.123px; इस प्रकार बहुत कम विसंगतियां उत्पन्न होती हैं और आपके लेआउट को बर्बाद कर देती हैं।

इस मुद्दे मैं अस्थायी रूप से अपनी गणना के सभी से 1px घटाया दूर करने के लिए और सब कुछ चिकनी लग रही है के रूप में

@media (max-width: 350px) { 
    .container > div { 
    margin-left: calc(((100% - 150px)/2) - 1px); 
    margin-right: calc(((100% - 150px)/2) - 1px); 
    background:black; 
    } 
} 

@media (min-width: 350px) and (max-width: 550px) { 
    .container > div { 
    margin-right: calc((100% - 300px) - 1px); 
    background:red; 
    } 
    .container > div:nth-child(2n) { 
    margin-right: 0; 
    } 
} 
@media (min-width: 550px) and (max-width: 750px) { 
    .container > div { 
    margin-right: calc(((100% - 450px)/2) - 1px); 
    background:purple; 
    } 
    .container > div:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media (min-width: 750px){ 
    .container > div { 
    margin-right: calc(((100% - 600px)/3) - 1px); 
    } 
    .container > div:nth-child(4n) { 
    margin-right: 0; 
    } 
}

संपादित किया जा सकता है:

Ive मीडिया के प्रश्नों का रंग जोड़ा मदद करने के लिए समस्या के स्रोत का निवारण करें और इस मुद्दे के रूप में उन्हें बाहर कर दिया है। आईव ने इस मुद्दे के कारण के रूप में संगतता मोड को भी अस्वीकार कर दिया और आपका कैल्क स्वरूपण ठीक दिखता है।

take a look at the updated fiddle

तोड़ने हम साथ ही रंग अस्थिर में विसंगतियों देखना होगा मीडिया क्वेरी थे ... यह है कि यह एक गणितीय गणना त्रुटि हमारे मार्जिन/रिक्ति निर्धारण परिभाषाओं के लिए विशिष्ट है पर विश्वास करने के लिए मुझे सुराग ... आगे की जांच जल्द ही आ रहा

मैं यानी में मीडिया के प्रश्नों के साथ कुछ मुद्दों का सामना करना पड़ा ... उल्लेख के लायक कुछ कीड़े

संगतता मोड कर रहे हैं - यह सुनिश्चित करने के लिए इस बंद कर दिया है पैदा कर सकता है अनपेक्षित व्यवहार या सिर्फ मीडिया क्वेरी सब एक साथ तोड़ने

doctype - एक की घोषणा नहीं या नहीं होने एक HTML5 doctype और भी अधिक मीडिया क्वेरी का कारण हो सकता विसंगतियों

<!DOCTYPE html>

Ive आप calc उपयोग कर रहे हैं देखा() मेरी पहली प्रतिक्रिया सुनिश्चित करें कि सभी गणितीय ऑपरेटर सफेद स्थान से घिरे रहे हैं बनाने के लिए था ... यह एक और मुद्दों का सामना करना पड़ा ive, जहां

calc(2px+5px)

विफल जहां उचित सिंटैक्स

०१२३५१६४१० होना चाहिए की प्रवृत्ति है है

calc(2px + 5px)

स्रोत

2013-05-23 14:42:06 Joe

ive थोड़ा क्लीनर समाधान की तलाश में है - यह मेरे लिए पूरी तरह से काम कर रहा है लेकिन मैं कुछ प्रकार की छंटनी या गोल विधि को पसंद करूंगा। – Joe

+1 धन्यवाद। तो ऐसा लगता है कि समस्या के मीडिया प्रश्नों के साथ कुछ लेना देना नहीं है बल्कि आईई कैसे उप-पिक्सेल प्रस्तुत करता है - जैसे समझाया गया [यहां] (http://ejohn.org/blog/sub-pixel-problems-in-css/) ... सही? – Danield

हां, यह वही है जो मैं सोच रहा था - अच्छा लेख btw – Joe

सीएसएस आईई

उत्तर

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