Question

我有一个恼人的问题，它在chrome中工作得很好，但是在firefox中，两个div之间没有任何原因。

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

Chrome：http://gyazo.com/d5464f5fe791c3958d28816dfd03803c

Firefox：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%应用于容纳该灰色矩形的容器。

Firefox Div差距问题

1 个答案: