Mozilla Firefox打破了html布局

Question

我在Mozilla Firefox网络浏览器中的页面布局有问题。我使用bootstrap和非常简单的布局。

<form role="form">
<div class="...">
<button class="btn btn-block"></button>
</div>
<div class="entry-placeholder">
<input class="form-control entry" type="text" />
</div>
</form>
<div class="top-buffer-medium"></div>
<div class="dropdown">
...
</div>
<div class="...">
<div class="btn-group">
<span class="btn btn-default">
   <span class="glyphicon glyphicon-calendar"></span>
</span>
<span class="btn btn-default">
  <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="btn btn-default">
  <span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>
</div>
<div class="btn">
<button class="btn btn-default btn-block"></button>
</div>
<div class="btn">
<button class="btn btn-default btn-block"></button>
</div>
<div class="table">
<table class="table table-hover table-striped">
<tr ng-repeat="...">
  <td>
    <input type="checkbox" ng-model="isRowSelected" />
  </td>
  <td></td>
  <td></span>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 </table>
</div>

我使用默认的bootstrap css而没有自定义样式。所有浏览器都正确显示我的布局只有Firefox才会破解它。你可以看到桌子走得太远了。我认为问题出在身体位置并尝试添加

.body {
-webkit-position: absolute;
-khtml-position: absolute;
-moz-position: absolute;
 position: absolute;
}   

但它没有帮助。

Answer 1

如评论中所述，将您的所有按钮排成一行div，将您的表格放在另一个按钮中：

<form>
<div class="row">
<!-- ALL your buttons -->
</div>
<div class="row">
<!-- Your table -->
</div>
</form>

同样body样式position: absolute;是完全错误的。