क्रोम बनाम बॉक्स-आकार: प्रदर्शन में सीमा-बॉक्स: तालिका

Question

मैं एक छोटे से 2-फलक display:table का उपयोग कर लेआउट कर रहा हूँ। रिक्ति के लिए (पृष्ठभूमि छवि से भी), मैं padding का उपयोग करता हूं। मैं बच्चों की जरूरत के रूप में एक सटीक width:50% उपलब्ध स्थान से है करने के लिए (मूल div की गद्दी के लिए संबंध लेने), मैं box-sizing:border-box का उपयोग करें।

यह ओपेरा में ठीक काम करता है, लेकिन क्रोम में box-sizing:border-box या यहां तक ​​कि -webkit-box-sizing:border-box को चुपचाप अनदेखा किया जाता है।

मैं एक डेमो जो मुद्दे से पता चलता कर दिया। दो लाल बक्से वर्ग होना चाहिए और नीले बॉक्स में चौड़ाई और ऊंचाई 200px होना चाहिए:

<div id="table"> 
    <div id="left"> 
     Something on the left side 
    </div>  
    <div id="right"> 
     Something on the right side 
    </div> 
</div> 

और सीएसएस: http://jsfiddle.net/fabb/JKECK/

यहाँ एचटीएमएल स्रोत है

#table { 
    display: table; 
    /*border-collapse: collapse;*/ 

    width: 200px !important; 
    height: 200px !important; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid blue; 
    padding: 60px 20px; 
} 

#table #left, #table #right { 
    display: table-cell; 

    width: 50%; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid red; 
    padding: 0; 
} 

यह एक है क्रोम में बग? या मुझ से कुछ गलत हो रहा है?

Answer 1

हाँ, गूगल क्रोम बग:

Issue #103543 - CSS display: table bug

कुछ मामले addding/(बग रिपोर्ट में jsfiddle) की तरह गद्दी के विशिष्ट पक्ष को हटाने के द्वारा हल किया जा सकता है, लेकिन आपके मामले के संभव नहीं हो सकता।

यह आसान है और वहाँ नाव का उपयोग कर, अगर चौड़ाई और ऊंचाई में जाना जाता है और आप वर्ग कोशिकाओं चाहते द्वारा और अधिक स्थिर है।

नोट: के बाद तालिका लेआउट सौंपा सीएसएस width/height तोड़ करने की क्षमता है, यह बेहतर इसे प्रयोग नहीं जब तक कि यह तालिका जैसी संरचना है या आप कंटेनर को विस्तृत सामग्री करना चाहते है - तो अपने !important में width & height काम नहीं कर रहा है।

Answer 2

क्रोम ब्राउज़र के लिए -webkit- निकालें।