javascript - 获取 Firefox 中标签的高度，我将其设置为 display: table; 在 CSS 中

Question

这个问题不是重复的。我有以下代码：

<header id="header">
  <div class="table">
    <div class="table-row">
      <nav id="menubar">Welcome</nav>
    </div>
    <div class="table-row">
      <nav id="models">something blah blah blah</nav>
    </div>
  </div>
</header>

在style.css文件中我有：

.table {
  display: table;
  width:100%;
}
.table-row {
  display: table-row;
}

的原因display: table-row;是使用vertical-align: middle;. 现在的问题是我无法获得headerFirefox 的高度。我试过了：

var header = document.getElementsByTagName("header");
var height = header[0].offsetHeight;

和

alert($("#header").height());

和

alert(header[0].offsetHeight || header[0].clientHeight);

和

var height = header[0].clientHeight;

但是他们都没有在 FF 中工作，尽管我在 Chrome 中得到了正确的结果。有解决办法吗？

Answer 1

height: 200px在#header 中 添加时，我得到了标题的高度。演示

编辑

好的！我知道了。

添加table-layout: fixed;到您的表格类，然后将高度定义为您对表格行类的要求

演示