2009-09-20 9 views
14

मेरा मानना ​​है कि मुझे वेबकिट में एक बग मिला है। इसमें बाहरी विड्थ (सत्य) शामिल है (और मैं jQuery में बाहरी हाइट (सत्य) मानता हूं)।मुझे लगता है कि मुझे वेबकिट (या jQuery) में एक बग मिली है, क्या अन्य पुष्टि कर सकते हैं?

प्रत्येक ब्राउज़र में सफारी और क्रोम में, तीसरा बॉक्स 200 है। सफारी और क्रोम में, यह मेरी स्क्रीन की चौड़ाई (लगभग) है।

क्लिक करें here मेरी परिणाम देखने के लिए: inline image not found. http://x3non.com/image/alec/147/outerWidth%20true%20fail.png

परीक्षण कर सकते हैं यहाँ अपने आप के लिए है: http://ramblingwood.com/sandbox/webkit-bug/test.html

मैं इस परीक्षण फ़ाइल का प्रयोग किया:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <style type="text/css"> 
    input { 
     width: 50%; 
     height: 1em; 
     font-size: 1em; 
    } 
#testBox {margin-left:100px;width:100px;} 
#testBox2 {padding-left:100px;width:100px;} 
#testBox3 {border-left:100px black solid;width:100px;} 
    </style> 
    <script type="text/javascript"> 
    function init(){ 
     $('#w1').val($('#testBox').width()); 
     $('#ow1').val($('#testBox').outerWidth()); 
     $('#owt1').val($('#testBox').outerWidth(true)); 
     $('#w2').val($('#testBox2').width()); 
     $('#ow2').val($('#testBox2').outerWidth()); 
     $('#owt2').val($('#testBox2').outerWidth(true)); 
     $('#w3').val($('#testBox3').width()); 
     $('#ow3').val($('#testBox3').outerWidth()); 
     $('#owt3').val($('#testBox3').outerWidth(true)); 
    } 
    $(document).ready(function(){ 
     init(); 

     $(window).resize(function(){ 
     init(); 
     }); 
    }); 
    </script> 

</head> 
<body> 
<div id="testBox">test</div> 
    <p>width() <input type="text" id="w1" /></p> 
    <p>outerWidth() <input type="text" id="ow1" /></p> 
    <p>outerWidth(true) <input type="text" id="owt1" /></p> 

<div id="testBox2">test2</div> 
    <p>width() <input type="text" id="w2" /></p> 
    <p>outerWidth() <input type="text" id="ow2" /></p> 
    <p>outerWidth(true) <input type="text" id="owt2" /></p> 

<div id="testBox3">test3</div> 
    <p>width() <input type="text" id="w3" /></p> 
    <p>outerWidth() <input type="text" id="ow3" /></p> 
    <p>outerWidth(true) <input type="text" id="owt3" /></p> 
</body> 
</html> 

उत्तर

11

क्रोम के डोम इंस्पेक्टर पुष्टि करता है कि यह एक वेबकिट मुद्दा है; यदि आप margin-right को ओवरराइड करने का प्रयास करते हैं, तो भी div को एक बड़ा दायां मार्जिन मिलता है। मार्जिन की गणना करने के लिए मजबूर कुछ चीजें सही ढंग से float: left और display: inline-block शामिल हैं। इसके अलावा यदि आप div को किसी अन्य आकार के div के अंदर डालते हैं, तो इसके outerWidth(true) युक्त div के innerWidth दिए जाएंगे, जो एक उपयोगी असली दुनिया के कामकाज हो सकता है - बस इसे margin: 0; padding: 0; width: XXX के साथ एक div में लपेटें।

1

यह खोजने में एक बग नहीं है बाहरी चौड़ाई वेबकिट वास्तव में divs को बड़े दाएं मार्जिन के रूप में प्रस्तुत करता है। चूंकि दाएं मार्जिन (लगभग) दाएं किनारे तक फैले हुए हैं, इसलिए आपको बड़ी बाहरी चौड़ाई मिलती है।

मुझे यकीन नहीं है कि यह प्रस्तुत करने का "सही" तरीका है, लेकिन यदि कोई विनिर्देश है जो कहता है कि सही मार्जिन का विस्तार नहीं किया जाना चाहिए, तो यह वेबकिट में एक बग होगा।

+1

में testet, यह वास्तव में fricken कष्टप्रद जब पार ब्राउज़र कोड लिखने है। –

0

मैं इसकी पुष्टि भी कर सकता हूं।

यह वास्तव में अजीब बात है कि वेबकिट यह करता है, और मैं कल्पना नहीं कर सकता कि कोई भी क्यों सोचता है कि यह एक अच्छा विचार है।

मुझे आश्चर्य है कि क्रोम 4 इसे ठीक करता है या नहीं।

1

मेरे अनुभव इस बात की भी पुष्टि करते हैं - यह एक वेबकिट बग है और इसे ठीक करने की आवश्यकता है।

1

यदि आप आकार अपने इनपुट क्षेत्र पर 1 कहने के लिए यह बग ठीक करता है सेट - या तो मामले में क्रोम और सफारी

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