Firefox 错误地显示负边距

Posted 2023-03-06

【中文标题】Firefox 错误地显示负边距

【英文标题】：Firefox displaying negative margin incorrectly

【发布时间】：2012-04-02 10:18:49

【问题描述】：

我的布局工作正常，但在 Firefox 中不行。我使用负边距来缩进 YouTube 视频后面的绿色框的顶部和底部。

它应该是这样的：

这是它在 Firefox 中的外观：

这里有一个实时版本可供查看：live site

这是相关代码的js小提琴：jsfiddle

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

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

【问题讨论】：

IE9 标准模式也会“错误”，IE9 'IE8 标准'模式和兼容性视图会“正确”;))

【参考方案1】：

采取：

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

把它放在下面

这为我解决了问题，然后您只需将 h4 向左移动一点，这应该很容易。

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

马丁

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

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

【讨论】：

我明白你的意思，但视频的宽度也是可变的。所以我使用captionwrap将“观看youtube频道”文本右对齐到视频的右边缘。

已编辑，因此它只影响 css。这似乎也有效，它阻止了 framewrap-gr div 在 h4 上扩展

哦，还有，我在 Firefox 上注意到菜单，关于我们的商品，发现我们的……在盒子里有点低。从 .ffnav a 中取出填充并添加： line-height:30px;或者您想要多少像素，该框将为您调整大小并居中对齐文本

这行得通！！！谢谢你，谢谢你，谢谢你！很高兴我不必重新设计所有内容。

【参考方案2】：

如果你设置绿色盒子的高度，它看起来就很好。

.framewrap-gr  height: 390px;  

我这么说只是因为你的 iframe 高度似乎是固定的。

---

评论后

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

【讨论】：

啊！我忘了提，.frame 中会有不同的视频和照片，所以高度需要可变。对不起。

嗯...我正在尝试使用 z-index 对背景颜色和视频进行分层。我无法让背景的高度受到视频高度的限制。也许我应该写一个新问题。

【参考方案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;

它可以工作，但如果它不起作用，请检查萤火虫对你说的内容！

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