html - 如何计算线框的高度？

Question

下面是我的测试代码。

var h_1 = $('.box').eq(0).height();
var h_2 = $('.box').eq(1).height();

$('#txt').html(
  'box#1 height = ' + h_1 + 'px' +
  '<br>' +
  'box#2 height = ' + h_2 + 'px'
);

.box {
  float: left;
  line-height: 4px;
  font-size: 12px;
  background-color: blue;
}

.box span {
  line-height: 8px;
  background-color: rgba(255,0,0,.4);
}

.box span.middle {
  vertical-align: middle; 
  background-color: rgba(0,255,0,.4);
}

#txt {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <span>Blog</span>
  <span>Blog</span>
</div>
<br>
<div class="box">
  <span>Blog</span>
  <span class="middle">Blog</span>
</div>
<br>
<div id="txt"></div>

这里是 w3.org 解释了行框高度是如何计算的:

1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

对于第一个<div class="box"> , 我认为它的最小高度应该是 8px根据上面的规则 1 和 3，但实际高度是 6px ，那么到底有没有精度问题，这背后真正的计算过程是怎样的呢？

Answer 1

你得到 9px 的原因是因为以下原因。

.box span.middle {
  vertical-align: middle; 
  background-color: rgba(0,255,0,.4);
}

我已经在下面的代码片段中删除了它并且在 6px 下工作正常

var i = 0;

$('.box').each(function() {
  i++
  var thisHeight = $(this).outerHeight(true);
  $('#txt').append("box #"+i+" height = "+thisHeight+" px<br>");
});

.box {
  float: left;
  line-height: 4px;
  font-size: 12px;
  background-color: blue;
}

.box span {
  line-height: 8px;
  background-color: rgba(255,0,0,.4);
}

.box span.middle {
  background-color: rgba(0,255,0,.4);
}

#txt {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <span>Blog</span>
  <span>Blog</span>
</div>
<br>
<div class="box">
  <span>Blog</span>
  <span class="middle">Blog</span>
</div>
<br>
<div id="txt"></div>