1

所以。我正在创建一个小站点来测试我的能力。在我的网站中，我有一个在 Firefox 中看起来像这样的页面：

在此处输入图像描述

附加文件和附加操作按钮位于表格内。并且每个按钮都在一个内部，这些按钮<td>设置为在另一个下方出现，并display:block;在<td>元素上使用 CSS。

问题是，当我在 IE9 或更低版本中打开页面时，td 会像这样内联显示：

在此处输入图像描述

因此，页面的响应能力被破坏，调整视口大小会将页面内容移动到左侧菜单下方......

这是表格的 HTML：

<table class="buttons">
    <tbody>
       <tr>
          <th colspan="2">Additional files:</th>
       </tr>
       <tr>
          <td>
             <a id="cv" href="">Curriculum Vitae</a>
          </td>
          <td>
             <a id="cover" href="">Cover Letter</a>
          </td>
       </tr>
    </tbody>
</table>
<table class="buttons">        
    <tbody>
       <tr>
          <th colspan="3">Additional actions:</th>
       </tr>
       <tr>
          <td>
             <a class="approve" href="">Denie</a>
             <span style="display: none;">31</span>
          </td>
          <td>
             <a href="" class="mailto">Reply</a>
          </td>
          <td>
             <a href="" class="link-fain delete-app">Delete</a>
          </td>
       </tr>
    </tbody>
</table>

这是CSS：

.buttons {
    float: left;
    margin: 20px auto 0;
    width: 50%;
}
.buttons td {
    display: block;
    width: 100%;
}

谁能建议我一个解决方案？先感谢您！

4

2 回答 2

4

您需要设置table-layout: fixed;您的表格，如果仍然无法正常工作，请在 td 中添加一个 div 并管理可能有效的 css。

于 2013-09-23T09:46:35.637 回答
1

这里真正的答案是你不应该<table>为此使用标签。您所拥有的不是表格，因此<table>在语义上不正确。

更糟糕的是，您随后通过 using 覆盖了默认表格布局display:block，这让我们更远离想要使用<table>.

通过使用这样的表格，并强制浏览器使用 CSS 对其进行重组，您会让浏览器感到非常困惑。特别是colspan属性，然后是三列按钮，当您实际上希望它们都在一列中时。很容易理解为什么你会得到不一致的行为，尤其是在旧浏览器中。

所以这里的解决方案是将你的布局换成<table>一组<div>元素。这在语义上是正确的，并且更容易使其样式一致。你也需要更少的标记。

如果你真的想在这个布局中继续使用表格，那么你需要重新设置所有元素的样式——display:block在tr元素上不会影响table,tbody和tr元素的显示属性，这些也需要更改。但实际上，我会避免这种情况。只需使用divs; 它会让事情变得更干净。

于 2013-09-23T10:13:18.387 回答