3

我有一个用来显示时间表的 HTML 表格。我最终想要的布局功能是：

  1. 如果可能，让每个表格单元格大小相同，以使表格看起来规则。（手动选择以适应最常见的内容。）
  2. 如果内容太长，请使单元格更高以容纳它。还要使同一行中的所有其他表格单元格更高以匹配高度。（宽度和列分别相同，但这种情况很少发生。）
  3. 内容周围有一个内边框。（为了简单起见。我的实际东西有其他装饰样式，不应该跨越应用到它的封闭单元格。）

我的问题是：是否有一种跨浏览器的方式——最好不涉及X-UA-Compatible——来获得具有上述属性的布局？

当前代码（Codepen）：

HTML

<table>
  <tr>
    <td>
      <div>
        Hello, world!
      </div>
    </td>
    <td>
      <div>
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    </td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;

  border: thin solid silver;
}

table td {
  height: 60px;
  width: 60px;
  box-sizing: border-box;

  padding: 1px;

  border: thin solid silver;
}

table td div {
  height: 100%;

  border: thin solid black;
  border-radius: 8px;
}

（真的比任何东西box-sizing: border-box;都<td>更强迫症，我只希望表格单元格的内部有60px不管填充。）

渲染示例

这就是上面在三种不同浏览器中呈现的方式：

Chrome、IE11和IE10的比较

  • 在Chrome（和 Safari）中，一切都按预期呈现。inner 周围有一个 1px 的填充<div>，并且该行中的所有其他<div>s 都会增长以填充可用高度。到目前为止，一切都很好。
  • 在Internet Explorer 11中，内部<div>s 粘在表格单元格上。即没有填充，除了单元格的右侧，甚至没有在行中的最后一个单元格上。（嗯？）但是，高度确实正确扩展。
  • 在Internet Explorer 10中，填充已正确应用。不幸的是，第三个单元格的长内容溢出了单元格边框，因为高度是直接指定的。不出所料，这就是我实际的 bugrep 中的内容。（我在 IE 的 F12 开发人员工具中使用仿真模式来检查这一点，但渲染与我在 bugrep 中获得的屏幕截图相匹配。）

我尝试在 IE10 示例中使用而不是min-height。这解决了溢出，但内部不会扩展：height<td><div>

IE10 使用最小高度渲染

所以，我要去 WebKit 的 / Blink 的渲染，我需要它主要在 IE10 上工作，但希望 IE11 也是如此。解释 IE11 中发生了什么变化以使我的布局以与 IE10 中的破坏方式完全不同的方式中断的奖励积分。

IE11 问题的其他示例

为了完整起见，我在 Chrome 和 IE11 中包含了我的实际应用程序的屏幕截图：

完整示例 – Chrome

完整示例 – IE11

如您所见，IE11 渲染中断比上面的示例更明显，以至于表格单元格未垂直对齐。（如果您查看标记9:00在顶部的垂直线。）我猜这是因为height: 100%in 的<div>意思是“获取height父元素的”，而不是“获取可用的垂直空间”，并且添加padding了里面<div>到那个。（这在标准盒子尺寸模型的背景下是一种变态的感觉，但我猜这艘船已经在这个话题上航行了。）

box-sizing: border-box;在内部添加一个<div> 几乎，但不能完全解决问题，但结果看起来完全有问题，可能是一个渲染器错误：

IE11，以新的、有趣的方式打破

无论如何，IE11 的损坏不是我的主要问题，就像 IE10 的内容溢出/单元格没有增长一样。

4

1 回答 1

0

如果你不介意不支持 < IE7，一个简单的解决方法是应用display: inline-block到 div。

这里的例子。

于 2013-11-12T05:18:37.633 回答