css - Firefox Div 差距问题

Question

我有一个烦人的问题，它在 chrome 中运行良好，但在 Firefox 中，两个 div 之间无缘无故地存在差距。

<div class="body-right">     
  <!-- VERTICAL GAP IS HERE -->
  <div class="body-right-container">
  <div class="body-right-pad"> 
</div>
</div>

铬： http: //gyazo.com/d5464f5fe791c3958d28816dfd03803c

火狐： http: //gyazo.com/f5f25eeab19622a2696e2d2510e1ea07

我的 CSS 中没有任何内容会导致这种差距。有任何想法吗？

.body-right {
    float: left;
    width: 767px;       
    background-color:#ebebeb;
    border-left: #c7c7c7 1px solid;
    padding-left: 1px;
    min-height: inherit;
}

.body-right-container {
display:block;
    background-color:#ebebeb;
    position: relative;
    padding: 0 0 49px 49px;
    min-height: inherit;
}

.body-right-pad {
    width: 300%;
    background-color:#ebebeb;
    position: absolute;
    left: 765px;
    height: 100%;
}

Answer 1

我在最右边看到一个大的灰色矩形，该元素可能是造成“差距”的元素。我在 Firefox 屏幕截图上看到了它，但在 Chrome 中没有。

您应该调查该元素并了解它为何出现在 Firefox 中。这可能是由于width:100%应用于包含该灰色矩形的容器。