2009-09-20 7 views
14

Wierzę, że znalazłem błąd w WebKit. Obejmuje on outerWidth (true) (i zakładam outerHeight (true)) w jQuery.Myślę, że znalazłem błąd w WebKit (lub jQuery), czy inni mogą potwierdzić?

We wszystkich przeglądarkach oprócz Safari i Chrome trzecie pole ma wartość 200. W Safari i Chrome jest to (prawie) szerokość mojego ekranu.

Kliknij here aby zobaczyć moje wyniki: inline image not found. http://x3non.com/image/alec/147/outerWidth%20true%20fail.png

można przetestować to dla siebie tutaj: http://ramblingwood.com/sandbox/webkit-bug/test.html

użyłem tego pliku testowego:

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

Odpowiedz

11

Inspektor DOM przeglądarki Chrome potwierdza, że ​​jest to problem związany z pakietem WebKit; div ma duży prawy margines, nawet jeśli próbujesz przesłonić margin-right. Niektóre rzeczy, które wymuszają prawidłowe obliczenie marginesu, obejmują: float: left i display: inline-block. Również jeśli umieścisz div wewnątrz innego rozmiaru div, jego outerWidth(true) da innerWidth zawierającego div, co może być użytecznym obejściem w rzeczywistym świecie - po prostu zapakuj je w div z margin: 0; padding: 0; width: XXX.

1

To nie jest błąd w znalezieniu szerokość zewnętrzna. Webkit faktycznie renderuje elementy div jako duże prawe marginesy. Ponieważ prawy margines rozciąga się (prawie) na prawą krawędź, uzyskujesz większą zewnętrzną szerokość.

Nie jestem pewien, czy jest to "poprawny" sposób renderowania, ale jeśli istnieje specyfikacja, która mówi, że prawy margines nie powinien się wydłużyć, byłby to błąd w WebKit.

+1

w obu przypadkach jest to naprawdę fricken irytujące podczas pisania kodu przeglądarki krzyż. –

0

Mogę to również potwierdzić.

To naprawdę dziwne, że Webkit to robi i nie mogę sobie wyobrazić, dlaczego ktokolwiek mógłby pomyśleć, że to dobry pomysł.

Zastanawiam się, czy Chrome 4 to naprawi.

1

Moje doświadczenia również to potwierdzają - jest to błąd Webkita i należy go naprawić.

1

jeśli ustawisz wielkość do powiedzmy 1 na polu wprowadzania go naprawia błąd - testowałem w Chrome i Safari

Powiązane problemy