Question

在底部的视频播放列表中，视频说明（背景黑色）需要降低20个像素。如果您使用Firefox浏览网站，您会更好地理解它。

[链接不再工作]

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing {  background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }

Answer 1

以上建议均无效。我用margin-left:-20px解决了这个问题。讨厌网络浏览器！

Answer 2

IE6 / 7存在混合浮动和绝对定位的问题。尝试从position:absolute

中删除#content #videos .playlist .entries .description p

Answer 3

您的链接已损坏，正确的网址应为http://pangeaadvisors.org/SS.jpg

在Firefox 3.5中我完全看到了与IE的截图相同（20 像素提升）。
在IE6中，我看到它与基座对齐但左边是20px
和IE7与IE6相同，但有一些小故障在滚动。

在firefox中，前2个项目未命中，但播放列表中的第3个项目正确显示。因素影响这是标题的长度。较长的标题显示正常，较短的20px间隙，行高会推动时间戳下降。

如果你在标题周围的“视频”中添加另一个div并使用overflow：hidden定义高度和宽度，它应该标准化并停止某些块与其他块的高度不同的问题。

完成此操作后，您可以使用一些CSS黑客通过使用

为任何行为不当的浏览器编写规则

position:relative;
top:XXpx

有点邋-but但应该工作得很好。不能更具体，因为我无法在浏览器中重新创建您的问题。

Div只使用Internet Explorer在另一个div上滑动

3 个答案: