表格渲染问题：firefox 4、gecko

Question

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

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

但在更新后的 Firefox 中，它的间距非常可怕。我已经在 firebug 中搞砸了好几天了，我什至不知道如何在 firefox 中解决这个问题。

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

有人能发现这个问题吗？

提前致谢 瑞安

Answer 1

您曾指出用表格创建布局已经过时，我绝对同意。这是使用

的解决方案，该解决方案应该适用于所有浏览器

示例： http://jsfiddle.net/pxfunc/hjgQm/

我将这些电影分类为左向和右向交替模式div 就像这样：

<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;} 以适合您所需的高度用于抵消薄膜