带“可调宽度”的HTML元素；悬挂；右边的项目

我正在做一个web应用程序的工作，不幸的是，当它出现在InternetExplorer中时，它被困在怪癖模式中。现在，记住，这些是IE 5.5的布局规则。我将不讨论我们无法启用标准模式的原因。只要说这不是一个选项就够了

同样，它也必须在Safari和Chrome浏览器下同样出色地运行，这两种浏览器都是“活生生的”浏览器，可以自我升级

现在，即使我们可以看到怪癖模式限制被解除（这样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.)                                         |        | |
| |_________________________________________________________________________________________|________| |
|______________________________________________________________________________________________________|

_______________________________________________________
|
|  _________________________________
| |              ||
||可变文本（短）| X图标|
| |________________________|________|
|_______________________________________________________
______________________________________________________________________________________________________
|                                                                                        |
|  __________________________________________________________________________________________________  |
| |                                                                               || |
||可变文本（有时此文本可能相当长。事实上，如此之长，以至于它真的是| X-icon | |
||需要换行到布局中的下一行。）||
| |_________________________________________________________________________________________|________| |
|______________________________________________________________________________________________________|

请注意，td.container是动态的。这不是一个固定的宽度

你可能会说，嘿，这是一个非常基本的布局！我倾向于同意

但我想问你的问题是，怎么做

我可以通过将内联块指定给

span.row

，例如设置其最大宽度，或任何大量其他方法来实现，但似乎没有任何方法可以在Quirks模式下实现这一点。在IE中，无论你在互联网上看到什么，答案都是“不要使用怪癖模式”。好吧，这不是他妈的事实，但不幸的是，这不是一个帮助我的答案

当前的解决方案将X图标与文本内联，因此图标将环绕以结束长线

一个确实丑陋的解决方法是使

span.row，span.X

程序集成为自己的

。我不喜欢这样，但如果有必要，我会这么做。

---

类似地，可以选择使用JS检测可能导致包含元素宽度变化的事件，然后可以直接计算和应用布局。这甚至比使用表格更糟糕，因为在这一点上，最终用户实际上可以看出有可疑的事情正在发生。

Quirks mode+在moders浏览器中运行良好=冲突要求。欢迎来到我的“真实世界”。我们有一个

IsQuirksMode（）

。而且，甚至没有必要在大部分代码中散布这一点，因为IE通常自己实现JavaScript。你是说Safari会自己更新吗？你是说，这是在Mac上，对吗？因为Safari不会在Windows下自动更新。从v5.1.7开始就没有了。所以，嗯，如果这是在Mac上，问题是关于Mac的Internet Explorer，是吗？嗯，我希望不是，但是，嗯，证据是。Safari for Windows与旧版IEs是同一条船，它不再得到支持或更新。我认为它在我们必须支持的平台列表中排名较低。