html - 表格渲染问题：firefox 4、gecko

Question

在 webkit 浏览器中，此页面呈现良好：

http://www.ryanhaywood.com/s/film.html

但是在更新的 Firefox 中，它的间距非常大。我在萤火虫中搞砸了好几天，我什至不知道如何在 Firefox 中解决这个问题。

对于上述页面中部署的过时解决方案（表格），我深表歉意

谁能发现问题？

在此先感谢瑞恩

Answer 1

您曾表示使用表格创建布局已过时，我绝对同意。这是一个使用<div>'s 的解决方案，它应该适用于所有浏览器

这里的例子：http: //jsfiddle.net/pxfunc/hjgQm/

我已经将电影分类为 divleft-orientation的right-orientation交替模式，如下所示：

<div class="left-orientation">
    <a href="#"><img src="http://placehold.it/250x175/ff0" alt="Director's Reel" /></a>
    <p class="title">Director's Reel</p>
</div>
<div class="right-orientation">
    <a href="#"><img src="http://placehold.it/250x175/f00" alt="Nobody's Off The Hook" /></a>
    <p class="title">Nobody's Off The Hook</p>
</div>

我使用边距来控制影片在父 div 中的显示位置

#films div {width:46%;margin-top:-100px;}
#films .left-orientation {text-align:right;}
#films .right-orientation {margin-left:54%}

您可以#films div {margin-top:-100px;}向上或向下调整以适合您所需的高度以抵消电影