2011-07-21 15 views
7

मैंने अपने स्टाइलशीट के लिए सीएसएसलिंट का उपयोग किया है और मुझे एक चेतावनी मिलती है जिसे मैं समझ नहीं पा रहा हूं।सीएसएसलिंट - टूटा हुआ बॉक्स मॉडल

पर विचार करें इस सीएसएस कोड: "ब्रोकन बॉक्स मॉडल: सीमा के साथ ऊंचाई के प्रयोग से।"

div { 
    width: 50px; 
    height: 50px; 
    border: 1px solid; 
} 

CSSLint निम्नलिखित कहते हैं "टूटा हुआ बॉक्स मॉडल: सीमा के साथ चौड़ाई का उपयोग करना।"

मुझे सीमा के साथ चौड़ाई/ऊंचाई का उपयोग क्यों नहीं करना चाहिए?

+1

यह ध्यान में असर आप सीएसएस एक प्रकार का वृक्ष उपयोग कर रहे हैं लायक है: http://mattwilcox.net/archive/entry/id/1054/ – thirtydot

उत्तर

6

मुझे लगता है कि सीएसएसलिंट पाठक के आसपास अच्छे प्रथाओं के एक सेट को लागू करने की कोशिश कर रहा है जो बॉक्स मॉडल के प्रभाव को समझने के लिए नहीं है। दिन के अंत में, मैं बॉक्स मॉडल को पूरी तरह से समझता हूं और समझता हूं कि आपका सीएसएस 52 पीएक्स की "वास्तविक" चौड़ाई/ऊंचाई उत्पन्न करता है जो शायद यह गलतफहमी के खिलाफ सुरक्षा करने की कोशिश कर रहा है।

व्यक्तिगत रूप से मैं इसे अनदेखा कर दूंगा। यह त्रुटि के बजाय "चेतावनी" कहता है और इसलिए व्यक्तिपरक है।

+0

हाँ कई चेतावनियों बेकार हैं: http: //csslint.net/about.html – MatTheCat

+0

त्वरित उत्तर के लिए धन्यवाद। :) मैं इसे 2minutes में स्वीकार करने जा रहा हूँ। –

+0

@ डॉटवेब: एचटीएच :-) –

2

यह एक चेतावनी है, कोई त्रुटि नहीं, तो आप ठीक हैं!

क्या यह आपको चेतावनी के बारे में है कि मानक बॉक्स मॉडल में, border की चौड़ाई ऊंचाई/आपके द्वारा निर्दिष्ट चौड़ाई के अलावा में है।

तो आपके उदाहरण में, वास्तविक पृष्ठ पर बॉक्स की ऊंचाई और चौड़ाई 52 पिक्सल होगी।

सीएसएसलिंट आपको इसके बारे में चेतावनी दे रहा है क्योंकि यह संभव है कि आपको इसका एहसास न हो, और आपका लेआउट इस तरह से इरादा नहीं हो सकता है।

यदि आप इसके बारे में जानते हैं और आपने इसे अपने लेआउट में ध्यान में रखा है, तो आप इस चेतावनी को हल करने के लिए "लिंक्ड बॉक्स मॉडल से सावधान रहें" चेकबॉक्स को अनचेक कर सकते हैं।

वैसे ही padding पर लागू होता है।

+0

ओह ठीक है। मुझे पता है कि बाहरी ऊंचाई में भी सीमा शामिल है। मैंने सोचा कि "टूटा हुआ बॉक्स मॉडल" कुछ अलग था। फिर भी धन्यवाद। –

+0

@ डॉटवेब - पुराना आईई बॉक्स मॉडल (जो अभी भी क्विर्क मोड की भयावहता के माध्यम से उपलब्ध है) निर्दिष्ट आयामों के अंदर सीमा और पैडिंग की गणना करता है। यह वास्तव में, quirks मोड और मानकों मोड के बीच प्राथमिक अंतर है।लोगों का आमतौर पर 'टूटा हुआ बॉक्स मॉडल' होता है, लेकिन सीएसएसलिंट की चेतावनी के संदर्भ में, मुझे लगता है कि यदि आप सोचते हैं कि बॉक्स मॉडल इस तरह से काम करता है, तो आपका कोड कहने के बजाए वे आपको चेतावनी देने के लिए वाक्यांश का उपयोग कर रहे हैं यह उस तरह से काम करता है (जो यह नहीं है)। – Spudley

0

पुराने इंटरनेट एक्सप्लोरर संस्करण (बनाम बाकी सब कुछ) चीजों की चौड़ाई की गणना करने का एक अलग तरीका उपयोग करते हैं। पुरानी आईई ने अपने पैडिंग और सीमा सहित बॉक्स को माप लिया, नई चीजें पैडिंग और सीमा के बिना सामग्री के आकार को मापती हैं। यह सुनिश्चित करने के लिए कि आपकी साइट लगातार दोनों प्रकार के बॉक्स मॉडल में प्रदर्शित होगी, आप उसी तत्व पर लागू शैली में पैडिंग/सीमा और चौड़ाई/ऊंचाई नहीं चुन सकते हैं।

  1. https://plus.google.com/103013777355236494008/posts/FqUEyyvT4RH
  2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
संबंधित मुद्दे