为啥 div 的测量宽度与浏览器测量不同？

Posted

技术标签:

【中文标题】为啥 div 的测量宽度与浏览器测量不同？【英文标题】：Why is measured width of divs different from browser measurement?为什么 div 的测量宽度与浏览器测量不同？ 【发布时间】：2018-12-31 17:48:49 【问题描述】：

我有一个小工具可以尝试几个 flexbox 参数。它可以在 flexbox 容器中添加和删除 div，然后使用 jQuery 显示这些添加元素的宽度。但是测量的宽度与我在浏览器检查器中测量的不同。

使用“加号”和“减号”按钮，可以添加元素。第一个元素的宽度应该是正确的，但后面的元素测量错误。这是怎么回事？

function getWidth() 
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  console.log(v);
  $(this).html(span);


$(document).ready(function() 
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) 
    HTML += itemsDiv + 'Item ' + i + '</div>';
  
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() 
    adjustment = $(this).val();
    if (adjustment == "plus") 
      items += 1;
    
    if (adjustment == "minus") 
      if (items > 1) 
        items -= 1;
      
    
    HTML = '';
    for (var i = 0; i < items; i++) 
      HTML += itemsDiv + 'Item ' + i + '</div>';
    
    $('.container').html(HTML);
    $('.item').each(getWidth);
  );

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() 
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  );

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() 
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  )
)
body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

【问题讨论】：

您的function getWidth() 使用带有传递布尔值true 的jQuerys outerWidth()。这意味着它将在其计算中包括边距。如果您删除布尔值就可以了。 @Paran0a 我故意添加了布尔值，因为我想要元素的总宽度（即有四个元素，它的 400px / 4 应该给每个元素 100 px） 【参考方案1】：

计算很好，不同之处在于您正在计算第一个的宽度，然后在其中添加会影响另一个的内容。然后你对第二个做同样的事情，等等。

最后，它们在视觉上都将具有相同的outerWidth1，因为它们具有相同的内容，但是在运行 JS 时情况并非如此，您不会注意到这一点。

这是未向元素添加内容的代码，您可以清楚地看到所有日志都给出相同的结果，这仅仅是因为 HTML 没有在 在宽度计算期间发生变化。

function getWidth() 
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  console.log(v);
  //$(this).html(span);


$(document).ready(function() 
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) 
    HTML += itemsDiv + 'Item ' + i + '</div>';
  
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() 
    adjustment = $(this).val();
    if (adjustment == "plus") 
      items += 1;
    
    if (adjustment == "minus") 
      if (items > 1) 
        items -= 1;
      
    
    HTML = '';
    for (var i = 0; i < items; i++) 
      HTML += itemsDiv + 'Item ' + i + '</div>';
    
    $('.container').html(HTML);
    $('.item').each(getWidth);
  );

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() 
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  );

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() 
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  )
)
body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

现在，这是您在计算其宽度后仅在第一个元素内添加内容的状态。我们可以清楚地看到，我们没有相同的结构，元素之间的边距也不相同，因此第二个元素的outerWidth会不同。

body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;

All the elements have the same outerwidth here
<div class="container">
  <div class="item">Item 0</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
We add the width calculation inside the first one and the margin will be reduced so the next one will be different
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

这是下一个状态，你可以清楚地看到效果。

使用的值是简单的占位符

body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;

<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 3</div>
</div>
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
</div>

在4个元素的情况下，只有margin受到影响，但是当涉及到更多元素时，由于收缩效果，内部宽度也可能受到影响：

body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;

<div class="container">
  <div class="item">Item 0</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
</div>
<div class="container">
  <div class="item">Width 100</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
</div>

如果你想要一个准确的计算，你应该避免在计算的时候改变 HTML 内容和 DOM 结构。你可以在计算之前和之后更新它，但不能在计算过程中添加内容。

1 ：这是包含边距的宽度，因为您将 true 添加到 jQuery 函数中。

根据评论，这里是您的原始代码示例，其中带有宽度信息的span 被附加，并且绝对定位在底部。这样就不会影响计算值。

堆栈sn-p

function getWidth() 
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  //console.log(v);
  $(this).append(span);


$(document).ready(function() 
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) 
    HTML += itemsDiv + 'Item ' + i + '</div>';
  
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() 
    adjustment = $(this).val();
    if (adjustment == "plus") 
      items += 1;
    
    if (adjustment == "minus") 
      if (items > 1) 
        items -= 1;
      
    
    HTML = '';
    for (var i = 0; i < items; i++) 
      HTML += itemsDiv + 'Item ' + i + '</div>';
    
    $('.container').html(HTML);
    $('.item').each(getWidth);
  );

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() 
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  );

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() 
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  )
)
body 
  box-sizing: border-box;


.container 
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;


div.item 
  position: relative;
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;


div.item span 
  position: absolute;
  left: 0; bottom: 0;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

【讨论】：

我也注意到了这种行为。我不确定如何处理这个计算只在 DOM 更改完成时发生。 @TMOTTM 我想你错过了理解...... 你在计算宽度时通过在元素中包含新文本来更改 DOM，你必须避免这种情况.. . 你可以在我的例子中看到添加width: xxx 在计算完成后改变元素的宽度从而改变边距......你应该简单地避免这种情况。在我的第一个示例中，计算很好，因为您没有更改 dom 当然，没错但是我必须更改 dom:) 使用“加号/减号”按钮，添加元素，我想监控它们的宽度在添加元素时如何变化。所以我必须添加元素，即更改 dom。 @TMOTTM 我在这个答案的末尾添加了一个示例，展示了一种实现方法。 @LGSon 是很好的解决方案，我想他现在会更清楚;)

以上是关于为啥 div 的测量宽度与浏览器测量不同？的主要内容，如果未能解决你的问题，请参考以下文章

为啥通过 AJAX 无限滚动加载的内容的高度在加载后没有正确测量？

Safari css 宽度过渡不适用于不同的单位测量

在不渲染的情况下测量文本宽度/高度

如何根据不同的屏幕尺寸测量和布局视图

需要弹性说明：宽度、最小（最大）宽度、显式宽度、显式最小（最大）宽度、测量宽度、测量最小宽度、百分比宽度

css的问题，div,input的display属性设定为inline,为啥宽度高度依然有效