मेरा मानना है कि मुझे वेबकिट में एक बग मिला है। इसमें बाहरी विड्थ (सत्य) शामिल है (और मैं 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>
में testet, यह वास्तव में fricken कष्टप्रद जब पार ब्राउज़र कोड लिखने है। –