Я думаю, что нашел ошибку в WebKit (или jQuery), могут ли другие подтвердить?

Я считаю, что я нашел ошибку в WebKit. Он включает в себя externalWidth (true) (и я предполагаю externalHeight (true)) в jQuery.

В каждом браузере, кроме Safari и Chrome, третье поле - 200. В Safari и Chrome - это (почти) ширина моего экрана.

Нажмите здесь, чтобы увидеть мои результаты: inline image not found.
(источник: x3non.com)

Вы можете проверить это для себя здесь: http://rabingwood.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>

Ответ 1

Инспектор Chrome DOM подтверждает, что это проблема WebKit; div получает большой правый край, даже если вы попытаетесь переопределить margin-right. Некоторые вещи, которые заставляют правильно рассчитывать маржу, включают float: left и display: inline-block. Кроме того, если вы поместите div внутри другого размера div, его outerWidth(true) предоставит innerWidth содержащего div, что может быть полезным обходным путем в реальном мире - просто оберните его в div с помощью margin: 0; padding: 0; width: XXX.

Ответ 2

Это не ошибка в поиске внешней ширины. Webkit на самом деле делает divs как большие правые поля. Поскольку правый край простирается (почти) до правого края, вы получаете большую внешнюю ширину.

Я не уверен, является ли это "правильным" способом его рендеринга, но если есть спецификация, в которой говорится, что правый край не должен расширяться, это будет ошибкой в ​​WebKit.

Ответ 3

Мои опыты также подтверждают это - это ошибка Webkit и должны быть исправлены.

Ответ 4

если вы задали размер, чтобы сказать 1 в поле ввода, он исправляет набор ошибок в Chrome и Safari

Ответ 5

Я также могу подтвердить это.

Это действительно странно, что Webkit делает это, и я не могу себе представить, почему кто-то мог подумать, что это хорошая идея.

Интересно, исправляет ли Chrome 4 это.