Question

我无法弄清楚使用firefox和IE中的表的定位问题。小提琴将正确显示完整的问题http://jsfiddle.net/qfDB9/即使提供了适当的高度和宽度，问题仍然存在。我创建表格的实际原因完全显示在Chrome中，而IE和Firefox存在定位问题。

CSS：

table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;
}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

HTML：

<table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
<tr>
    <td id="number_table">1</td>
    <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
    <td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td>
</tr>
<tr>
    <td rowspan="3"></td>
</tr>
<tr>
     <td id="band_name">Something</td>
</tr>
</table>

有没有办法解决这个问题。

Answer 1

您需要垂直对齐<tr>标记

中的内容

table tr { vertical-align:top; }

参见 DEMO

我还可以补充一点，您应该考虑使用div's代替tables

Answer 2

[求助] 检查一下。只需将valign="top"添加到<tr>或<td>

即可

DEMO HERE： http://jsfiddle.net/qfDB9/9/

Answer 3

建议，总是尝试使用语义代码。比如使用thead，tbody，因为它也有助于实现CSS。还有助于简化整个网站的CSS。

解决方案您可以添加此“table tbody td{vertical-align:top;}”，以便所有<td>中的所有内容都应该与顶部对齐。因此，如果你必须提供一些通常对齐底部的表标题，那么你可以通过<thead> <th>“vertical-align：bottom。”处理。

请参考此处的代码：

<强> HTML

    <table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="number_table">1</td>
      <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
      <td rowspan="4" id="description_table">something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br></td>
    </tr>
    <tr>
      <td rowspan="3"></td>
    </tr>
    <tr>
      <td id="band_name">Something</td>
    </tr>
  </tbody>
</table>

<强> CSS

table thead th{vertical-align:bottom;}
table tbody td{vertical-align:top;}


table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;

}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

您也可以参考小提琴： http://jsfiddle.net/aasthatuteja/sU3SS/

如果有帮助，请告诉我！

享受!!

表格定位Chrome，Firefox和IE中的差异

3 个答案: