Firefox错误地显示负边距

Question

我的布局工作正常，但在Firefox中没有。我使用负边距缩进YouTube视频背后绿框的顶部和底部。

以下是它的外观：

以下是Firefox的外观：

这是一个现场版本：live site

以下是相关代码的小提琴：jsfiddle

我原本忘了提到高度是可变的，因为.frame类中会有不同类型的视频和照片。有没有办法在没有定义高度的情况下解决这个Firefox问题？

如果有更好的方式来编写它并获得相同的效果，我也愿意重新组织它。

Answer 1

如果设置绿色框的高度，它似乎就可以了。

.framewrap-gr { height: 390px; } 

我之所以这么说，是因为你的iframe高度似乎是固定的。

---

评论后

我建议改变你的构建方式。保留一个容器div，在其中放置一个bg div和video div，在bg图层顶部对视频进行z-index，并为bg图层设置你需要它的方式（相对于它们的父级）

Answer 2

采取：

在我们的YouTube频道观看更多视频

出来并把它放在

下面

为我修复了这个问题，你只需要将h4向左移动一点就足够了。

希望有帮助，下面是复制的代码

马丁

编辑： 保留HTML，并将css更改为：h4.caption

h4.caption{
display:table;
padding-right:5px;
text-align:right;
width:100%;
}

Answer 3

这是你的css：

.framewrap-gr, .framewrap-fb, .framewrap-map {
-moz-border-radius: 10px;
border-radius: 10px;
margin: 50px 0 80px 0;
position: relative;

}

尝试这样做：

.framewrap-gr, .framewrap-fb, .framewrap-map {
-moz-border-radius: 10px;
border-radius: 10px;
margin: 50px 0 80px 0;
position: relative;
margin-bottom: -15px;

}

它可以工作，但如果没有，请查看萤火虫对你说的话！

抱歉英语不好，我是巴西人。