2009-09-20 11 views
14

Credo di aver trovato un bug in WebKit. Implica outerWidth (true) (e suppongo outerHeight (true)) in jQuery.Penso di aver trovato un bug in WebKit (o jQuery), altri possono confermare?

in tutti i browser, ma Safari e Chrome, la terza casella è 200. In Safari e Chrome, è (quasi) la larghezza del mio schermo.

Clicca here per vedere i miei risultati: inline image not found. http://x3non.com/image/alec/147/outerWidth%20true%20fail.png

È possibile verificare è per voi stessi qui: http://ramblingwood.com/sandbox/webkit-bug/test.html

ho usato questo file di test:

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

risposta

11

L'ispettore DOM di Chrome conferma che si tratta di un problema WebKit; il div ottiene un ampio margine destro, anche se si tenta di ignorare margin-right. Alcune cose che costringono il margine a essere calcolato correttamente includono float: left e display: inline-block. Inoltre se metti il ​​div all'interno di un div di dimensioni diverse, il suo outerWidth(true) darà il innerWidth del div contenente, che potrebbe essere un utile soluzione alternativa al mondo reale - basta avvolgerlo in un div con margin: 0; padding: 0; width: XXX.

1

Non è un bug nel trovare il larghezza esterna. Webkit rende in effetti i div con ampi margini a destra. Poiché il margine destro si estende (quasi) al margine destro, si ottiene la larghezza esterna più grande.

Non sono sicuro se questo è il modo "corretto" per renderlo, ma se c'è una specifica che dice che il margine destro non dovrebbe estendersi, allora questo sarebbe un bug in WebKit.

+1

in entrambi i casi, è davvero fricken fastidioso quando la scrittura di codice cross browser. –

0

Posso anche confermare questo.

E 'davvero strano che Webkit fa questo, e non posso immaginare perché qualcuno potrebbe pensare che questa sia una buona idea.

Mi chiedo se Chrome 4 risolve questo problema.

1

Le mie esperienze confermano anche questo - è un bug Webkit e deve essere risolto.

1

se si imposta dimensioni a dire 1 sul campo di input si risolve il bug - testet in Chrome e Safari

Problemi correlati