IE 中的表响应能力

Question

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

附加文件和附加操作按钮位于表格内。并且每个按钮都在<td> 内，使用<td> 元素上的display:block; 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%;
}

谁能给我一个解决方案？ 提前谢谢！

Answer 1

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

Answer 2

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

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

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

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

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