Html Chrome、Firefox和IE中的表定位差异

我无法在firefox和IE中使用table来解决定位问题。 即使提供了适当的高度和宽度，小提琴也会正确地显示整个问题。问题仍然存在。我创建该表的实际原因在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;
}

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

HTML:

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;
}

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

1.
某物某物某物某物某物某物某物某物
某物

---

是否有办法解决此问题。

您需要垂直对齐

标记中的内容

table tr{vertical align:top；}

请参见

---

<>我也可以补充一下，您应该考虑使用<代码> div的<代码>，而不是<代码>表< /> >

< p> <强> [解决] < /强>检查此。只需将

valign=“top”

添加到

或

---

此处演示：

建议，始终尝试使用语义代码。就像使用thead、tbody一样，因为它也有助于实现CSS。也有助于在整个网站上简化CSS

解决方案您可以添加此CSS“

表体td{vertical align:top；}

”，因此所有

中的所有内容都应该与top对齐。因此，如果您必须给出一些通常与底部对齐的表格标题，那么您可以通过

的“垂直对齐：底部”进行处理

请参阅此处的代码：

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>

您也可以参考小提琴：

如果有帮助，请告诉我

---

享受

这里是一个相同布局的快速演示，仅使用垂直对齐是我今天学到的属性。：）。你的小提琴帮了我的忙！如果你喜欢，那么你必须至少投票给uop你认为对你有帮助的答案。。。并勾选最有用的一个。。快乐编码！垂直对齐是我今天学到的属性。你的小提琴有用me@AbhishekFulzele哦，请接受我的答案，点击“勾号”，如果你喜欢的话也可以投票：）