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

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
• 火狐:6px

如果我删除 border-collapse，所有浏览器都会返回 11px，正如我所期望的那样。

在使用 border-collapse 时，是否有更可靠的方法来获取精确的边框宽度？或者有没有一种方法可以获取 thead、tr 或 th 的高度(包括边框)，而不会在浏览器之间遇到同样的不一致问题？

Answer 1

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

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

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

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

在 Chrome 和 Firefox 中测试，均返回 11px。

---

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

var th = document.getElementById('th');
var style = window.getComputedStyle(th);

var borderHeight = style.getPropertyValue('border-bottom-width');
console.log(borderHeight);

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

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