在我的mozilla浏览器设计中出现了一个无法解释的差距

Question

我的设计遇到了一些问题。有一个不可解释的差距即将来临。

它在谷歌浏览器浏览器中工作正常，但在mozilla和Internet Explorer 10中无法正常工作。

页面的

链接为https://www.zenkast.com/new-home

差距低于“Zenkast奖励你的预测技巧”文字，该部分有红色边框。

如果有人可以帮我解决这个问题。

Answer 1

它看起来像可解释的差距。 :P给出这个来解决问题：

.row.videodiv::before {display: block;}
.row.videodiv {display: block; overflow: hidden;}

这是clearfix无法正常工作造成的。或者，请考虑将float移至<div>内的.videodiv：

.videodiv > div {float: none;}

Answer 2

看起来响应式视频被其父引导列浮动（从文档流中取出）的问题。添加以下内容将解决它：

  .videodiv > div {float: none;}

Answer 3

添加清除：div.row.videodiv！

尝试下面的代码

    <div class="row newblock">
        <h2 class="header">Lets do predictions! We have got prizes for you</h2>
        <h3 class="contentlabel" style="margin-bottom: 0px;">Zenkast rewards your prediction skills</h3>
        <div class="row">
            <div class="row videodiv" style="clear: both;">
                .......................
            </div>
        </div>
    </div>

或者添加此css规则

＆＃13;

＆＃13;

div.row.videodiv {
    clear: both;
}

＆＃13;

＆＃13;

＆＃13;