Firefox rowspan问题 [英] Firefox rowspan problem

问题描述

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

在 http://stinak.com/?s=1&u=1 （例如集合/ S / S 2012）

我想强制FF使这些表看起来与Chrome相同。这意味着即使行数小于rowspan中设置的行数，也排齐顶部的所有行。 我不知道是什么规格不得不说这个，但铬的行为看起来不正确。我的其他浏览器（Opera，Firefox和Internet Explorer）都没有这样的表格。

我认为摆脱表格会更容易： p>

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 Transitional // ENhttp：// 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> 
  

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

I need some help with rowspan in firefox. I need 1 big cell and 30 rows (7 cells per row) of smaller cells next to the big one. It works exactly as I want in Chrome, but FF stretchs all smaller cells to make whole table rectangle or square shaped.

Experiencing this issue at http://stinak.com/?s=1&u=1 (eg. Collections/ S/S 2012)

I would like to force FF to make these tables look same as in Chrome. It means align all rows on top even if there are less rows than is set in rowspan.

解决方案

I don't know what specs have to say about this but Chrome's behaviour looks wrong. None of my other browsers (Opera, Firefox and Internet Explorer) render the table that way.

I think it'd be easier to get rid of the table:

<!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>

Accomplishing exact pixel layouts with tables can be a nightmare.

这篇关于Firefox rowspan问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！