我正在开发一个 Web 应用程序，当它出现在 Internet Explorer 中时，不幸的是它陷入了怪癖模式。现在，请记住，这些是 IE 5.5 布局规则。我不会详细说明我们无法启用标准模式的原因。可以说这不是一个选择。
同样，它也必须在 Safari 和 Chrome 下同样运行良好，它们是可以自我升级的“活生生的”浏览器。
现在即使我们能以某种方式看到 Quirks 模式限制被解除（这样 IE9 将在标准模式布局规则下运行页面）我仍然不能使用 flexbox，因为 IE9 没有 flexbox。
这是我需要支持的布局结构：
_______________________________________________________
|<td.container>
| _________________________________
| |<span.row> |<span.X>|
| | Variable text (short) | X-icon |
| |________________________|________|
|_______________________________________________________
______________________________________________________________________________________________________
|<td.container> |
| __________________________________________________________________________________________________ |
| |<span.row> |<span.X>| |
| | Variable text (sometimes this text can be quite long. So long, in fact, that it really | X-icon | |
| | needs to wrap to the next line in the layout.) | | |
| |_________________________________________________________________________________________|________| |
|______________________________________________________________________________________________________|
请注意， td.container 是动态的。不是固定宽度！
你可能会说，嘿，这是一个非常基本的布局！我倾向于同意！
但我的问题是，如何？
我可以通过将 inline-block 分配给span.row并设置其最大宽度或任何大量其他方式来做到这一点，但似乎没有任何方法可以在 Quirks 模式下进行这项工作。在 IE 中。在互联网上的任何地方，响亮的答案都是“不要使用怪癖模式”。好吧，这不是该死的事实，但不幸的是，这不是对我有帮助的答案。
当前的解决方案将 X 图标嵌入到文本中，因此图标会自动换行以结束长行。
一个万无一失的丑陋解决方法是使span.row,span.X程序集成为自己的<table>. 我不喜欢这样，但如果必须，我会这样做。同样，也可以选择使用 JS 检测可能导致包含元素宽度发生变化的事件，然后直接计算布局，直接应用。这甚至比使用表格更糟糕，因为在这一点上，最终用户实际上可以告诉您正在发生一些可疑的事情。