Question

我在firefox中需要一些关于rowspan的帮助。我需要一个大单元和30行（每行7个单元）的较小单元旁边的大单元。它完全按照我想要的方式在Chrome中工作，但FF拉伸所有较小的单元格，使整个表格呈矩形或方形。

在http://stinak.com/?s=1&u=1遇到此问题（例如，Collections / S / S 2012）

我想强制FF使这些表格与Chrome中的相同。即使行数少于rowspan中设置的行数，也意味着将所有行对齐在顶部。

Answer 1

我不知道有什么规格可以说，但Chrome的行为看起来不对。我的其他浏览器（Opera，Firefox和Internet Explorer）都不会以这种方式呈现表格。

我认为摆脱桌子会更容易：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
div.gallery{
    width: 750px;
    font-size: 0;
    overflow: hidden;
}
div.gallery div.large{
    float: left;
    width: 400px;
}
div.gallery div.thumbs{
    float: left;
    width: 350px;
}
div.gallery div.thumbs div{
    display: inline-block;
}
--></style>
</head>
<body>


<div class="gallery">
    <div class="large"><img src="http://placehold.it/400x600"></div>

    <div class="thumbs">
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>

            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
            <div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
        </div>
</div>

</body>
</html>

使用表格完成精确的像素布局可能是一场噩梦。

Firefox rowpan问题

1 个答案: