表细胞不保持正确的高度，复制背景

我的表如下：9个单元，3行3周的cols，[0,0]是左上角[1,1]是主要形式的内容，并且[2,2]是右下角[，在我的描述中都是零索引]。我正在封装我的表单，因此我可以在它周围放置一个“投影”。

我的问题：[行0]和[行2]中的单元格假设为8px高，而他们是22px。

我使用表格的4个角落单元格来显示圆角边缘，但其他4个“边缘”单元格以1px维度重复背景，无论是高还是宽，取决于它在x或y中的重复，但是在[行0]和[行2]中'repeat-x'的位置，td没有正确地粘在高度上。 Borrowers：IE只是在'IE 7/8'兼容性视图中显示问题，但是Chrome和Firefox已经开始做同样的事情，认为我的DOCTYPE正在影响它。

我重视的屏幕截图部分和一些HTML editted除去吓人的网站URL种源的它产生的（我在做这个作为三夏）

screen shot of top left corner showing the issue

<table cellpadding=0 cellspacing=0 border=0 style="width:560px;"> 
<tr> 
    <td style="background-image:url('url'); width:8px; height:8px;"> 
     <img src='url' width='8' height='8'/> 
    </td> 
    <td style="background-image:url('url'); height:8px;"> 
     <img src='url' height='8'/> 
    </td> 
    <td style="background-image:url('url'); width:9px; height:8px;"> 
     <img src='url' width='9' height='8'/> 
    </td> 
</tr> 
<tr> 
    <td style="background-image:url('url'); width:8px;"> 
    </td> 
    <td style="background-color:#DDDDDD"> 
     <!-- main table content !--> 
    </td> 
    <td style="background-image:url('url')"> 
    </td> 
</tr> 
<tr> 
    <td style="background-image:url('url') width='8' height='9'> 
     <img src='url' width='8' height='9'/> 
    </td> 
    <td style="background-image:url('url') height='9'> 
    </td> 
    <td style="background-image:url('url'); width:9px; height:9px;"> 
     <img src='url' width='9' height='9'/> 
    </td> 

</tr> 

</table>

我已经在表格没有确认正确的高度或宽度之前遇到了麻烦，以前的修复确保没有文字（或黑色字符）强制执行高度，并确保表格单元格不是空的（我插入了bg图像作为一些单元格中的img标签，没有效果）。

我真的希望这是一个众所周知的HTML问题，请大家帮忙。

来源

2012-08-02 Nnoel

看起来像一个渲染错误。你使用的是什么浏览器？ – starbeamrainbowlabs 2012-08-02 16:40:27

您有任何填充应用于单元格吗？ – MetalFrog 2012-08-02 16:52:09

通常情况下，我会在布局中谴责表格的使用，但这是一种没有真正好选择的情况（可能一旦border-image获得更好的支持）。也就是说，HTML5规范要求用于布局的表格为role="presentation"属性，因为屏幕阅读器和类似（例如盲人的可访问性）。它仍然可能会给他们一个困难的时间，也可能会与搜索引擎蜘蛛混乱，但这是你的选择。其次，这样的内联样式将导致维护噩梦。您应该有一个外部样式表，并将其与<link rel="stylesheet" type="text/css" href="URL.css"/>一起使用。使用class和id属性将使您的表格（或其他任何东西）更容易风格。

第三，你提到你认为你的文档类型导致了问题，但你没有包括它。无论如何，您应该使用HTML5文档类型–，这只是<!DOCTYPE html>。旧的HTML 4.x/XHTML 1.x /等。文档类型可能不是一件好事情继续使用。

把一切放在一起，你有HTML，看起来有点像这样：

<!DOCTYPE html> 
<html> 
    <head> 
     <!-- any other header stuff you need, like meta or title --> 
     <link rel="stylesheet" type="text/css" href="something.css"/> 
    </head> 

    <body> 

     <table id="mainLayout" role="presentation"> 
      <thead> 
       <tr> 
        <td class="left-cell"></td> 
        <td></td> 
        <td class="right-cell"></td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="left-cell"></td> 
        <td><!-- main content goes here. --></td> 
        <td class="right-cell"></td> 
       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td class="left-cell"></td> 
        <td></td> 
        <td class="right-cell"></td> 
       </tr> 
      </tfoot> 
     </table> 

    </body> 
</html>

现在的CSS：

table#mainLayout 
{ 
    margin: 0; 
    padding: 0; 
} 

table#mainLayout td 
{ 
    margin: 0; 
    padding: 0; 
} 

table#mainLayout thead tr 
{ 
    height: 8px; 
} 

table#mainLayout tfoot tr 
{ 
    height: 9px; 
} 

table#mainLayout .left-cell 
{ 
    width: 8px; 
} 

table#mainLayout .right-cell 
{ 
    width: 9px; 
} 

table#mainLayout thead td 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout thead td.left-cell 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout thead td.right-cell 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tbody td 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tbody td.left-cell 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tbody td.right-cell 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tfoot td 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tfoot td.left-cell 
{ 
    background-image: url(wherever the image goes); 
} 

table#mainLayout tfoot td.right-cell 
{ 
    background-image: url(wherever the image goes); 
}

更具体的规则（包括.left-cell/.right-cell）覆盖不太具体的规则，所以没有必要有一个.center-cell规则。

来源

2012-08-02 16:58:03 KRyan

很好的答案非常感谢你！我重做了我必须符合你的建议，复制你的CSS和BAM！它工作得很好！外边的细胞失去了宽度，但愚蠢的盒子模型有一些麻烦，我只是没有设置宽度足够宽。再次感谢！ – Nnoel 2012-08-03 15:31:00

表细胞不保持正确的高度，复制背景

回答

相关问题