Question

使用table { border-collapse: collapse; }与th { border-bottom: 11px solid black }结合使用时，似乎无法计算JavaScript中的border-bottom-width。

window.getComputedStyle(th).getPropertyValue('border-bottom-width')根本没有帮助。只需看看this fiddle在不同的浏览器中记录到控制台...

Chrome：11px
IE11：5.5px
Firefox：6px

如果我删除border-collapse，则所有浏览器都会返回11px，正如我所料。

使用border-collapse时，是否有更可靠的方法来获得精确的边框宽度？或者有没有办法获得thead，tr或th的高度（包括边框）而不会遇到浏览器之间的相同不一致？

Answer 1

有趣！好像它只是plain inconsistency between browsers，不要认为这是一个简单的解决方案。无论如何，这是一个hacky解决方案/解决方法：

＆＃13;

var th = document.getElementById('th');
var table = document.getElementById('table');
var style = window.getComputedStyle(th);

table.style.borderCollapse = 'separate';
var borderHeight = style.getPropertyValue('border-bottom-width');
table.style.borderCollapse = 'collapse';
console.log(borderHeight);

＆＃13;

table {
  border-collapse: collapse;
}
th {
  border-bottom: 11px solid red;
}

＆＃13;

<table id="table">
  <tr>
    <th id="th">TH</th>
  </tr>
</table>

＆＃13;

在Chrome＆amp; Firefox，都返回11px。

编辑：根据@Eric N的回答，您可能很幸运display: block添加th。那会破坏表格布局，你需要解决这个问题。例子：

＆＃13;

var th = document.getElementById('th');
var style = window.getComputedStyle(th);

var borderHeight = style.getPropertyValue('border-bottom-width');
console.log(borderHeight);

＆＃13;

table {
  border-collapse: collapse;
}
th {
  display: block;
  float: left;
  border-bottom: 11px solid red;
}

＆＃13;

<table id="table">
  <tr>
    <th id="th">TH</th>
    <th>TH</th>
    <th>TH</th>
  </tr>
</table>

＆＃13;

Answer 2

基于this post，它看起来有一个显示：table-cell（继承你的单元格）在不同的浏览器中产生不同的高度/边框宽度结果。他们建议将显示更改为阻止您强制浏览器按预期计算该值。

使用border-collapse时，如何计算JavaScript中的border-bottom-width？

2 个答案: