Question

因此。我正在创建一个小网站来测试我的能力。在我的网站中，我有一个在Firefox中的页面如下：

enter image description here

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

问题是，当我在IE9或更低版本中打开页面时，td显示为内联，如下所示：

enter image description here

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

以下是表格的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 { {1}}元素不会影响tr，table和tbody元素的显示属性，这些元素也需要更改。但实际上，我会避免这种情况。只需使用tr s;它会让事情变得更加清洁。

IE中的表响应

2 个答案: