Question

以下是我的测试代码。

＆＃13;

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'
);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这里是w3.org解释如何计算线框高度：

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是其边距框的高度;对于内联盒，这是他们的行高＃39; （参见＆＃34;计算高度和边距＆＃34;以及＆＃34中的内联框的高度;领先和半领先＆＃34;。）

内嵌级框根据其垂直对齐方式垂直对齐。属性。如果他们对齐＆＃39;顶部＆＃39;或者＆＃39;底部＆＃39;，它们必须对齐以便最小化线盒高度。如果这样的盒子足够高，有多种解决方案，CSS 2.1没有定义线盒的基线位置（即支柱的位置，见下文）。

线框高度是最上面的框顶部和最下面的框底部之间的距离。（这包括支柱，如下面的＆＃39; line-height＆＃39;中所述。）

对于第一个<div class="box">，我认为它的最小高度应为8px 规则1＆amp; 3 以上，但实际高度为6px，那么是否有任何精度问题以及这背后真正的计算过程是什么？

Answer 1

你获得9px的原因是由于以下原因。

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

我已在下面的代码段中将其删除，并在6px正常工作

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何计算线框的高度？

1 个答案: