2009-09-20 8 views
14

WebKit'te bir hata bulduğuma inanıyorum. JQuery'de outerWidth (true) (ve dışHeyight (true)) varsayar.WebKit'te (veya jQuery'de) bir hata buldum, diğerleri onaylayabilir mi?

Her tarayıcıda Safari ve Chrome'da, üçüncü kutu 200'dir. Safari ve Chrome'da, ekranımın genişliği (neredeyse). Test edebilirsiniz

burada kendiniz için olduğu inline image not found. http://x3non.com/image/alec/147/outerWidth%20true%20fail.png

:

tıklayın here benim sonuçları görmek için bu bulgu bir böcek değil

<!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> 

cevap

11

Chrome'un DOM denetçisi, bunun bir WebKit sorunu olduğunu onaylar; margin-right'u geçersiz kılmaya çalışsanız bile div büyük bir sağ kenar boşluğuna sahip olur. Marjinin doğru bir şekilde hesaplanmasını zorlayan bazı şeyler float: left ve display: inline-block içerir. Ayrıca, eğer başka bir büyüklükteki divun içine div koyarsanız,,no'lu bir div içine sarın, içeren div'in innerWidth'unu verecektir.

1

: Bu test dosyası kullanılan

http://ramblingwood.com/sandbox/webkit-bug/test.html dış genişlik. Webkit, aslında divleri büyük sağ kenar boşluklarına sahip olarak işler. Sağ kenar boşluğa (neredeyse) doğru kenara uzandığından, daha büyük dış genişliğe sahip olursunuz.

Bunun "oluşturmanın" doğru yolu olup olmadığından emin değilim, ancak sağ kenar boşluğunun genişletilmemesi gerektiğini belirten bir belirtim varsa, bu WebKit'te bir hata olur.

+1

yılında testet, çapraz tarayıcı kod yazarken rahatsız edici gerçekten kızarık olduğunu. –

0

Ayrıca bunu doğrulayabilirim.

Webkit'in bunu yapması garip bir durumdur ve neden bunun iyi bir fikir olduğunu düşüneceğini hayal bile edemiyorum.

Chrome 4 bunu düzeltip düzeltmediğini merak ediyorum.

1

Deneyimlerim de bunu onaylıyor - bu bir Webkit hatası ve düzeltilmesi gerekiyor. Eğer boyutu hatayı düzeltir girişinizi sahada 1 söylemek ayarlarsanız

1

- her iki durumda da Chrome ve Safari

İlgili konular