【发布时间】：2016-06-28 03:12:16
【问题描述】：
我正在从事一个项目，我将在我无法控制的页面中注入标记（嵌入脚本）。一个有趣的案例出现了，我注入的 div 包含在一个表中。我的 div 的子元素是一个水平菜单，当它超过父元素的宽度时应该滚动 (overflow-x: auto)，但是在父元素是表格的情况下没有 table-layout: fixed，我注入的内容反而导致父表扩展，严重破坏了一些布局。
在这种情况下，表格包含在一个固定宽度的 div 中，如下所示：
<div style="width: 600px;">
<table width="100%">
<tr>
<td>
<div> <!-- my content --> </div>
</td>
</tr>
</table>
</div>
我发现在桌子上设置table-layout: fixed 可以解决这个问题。但是，这个标记超出了我的控制——我只能从最里面的 div 开始更改标记/CSS。
我确实找到了一个可行的技巧：在我的 div 上设置 width: 100%; display: table; table-layout: fixed;。但是，我不确定这是否符合任何相关规范，因为这个display: table div 的内容都是display: block。
这里是重现问题的标记，以及演示黑客：
<div class="outer">
<table class="bad-table">
<tr>
<td>
<div class="wrapper">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet pharetra nunc at condimentum.</div>
<div class="target">
<ul class="menu">
<li style="background-color: #800;"></li>
<li style="background-color: #880;"></li>
<li style="background-color: #080;"></li>
<li style="background-color: #008;"></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet pharetra nunc at condimentum.</div>
</div>
</td>
</tr>
</table>
</div>
<div class="outer">
<table class="bad-table">
<tr>
<td>
<div class="wrapper hack">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet pharetra nunc at condimentum.</div>
<div class="target">
<ul class="menu">
<li style="background-color: #800;"></li>
<li style="background-color: #880;"></li>
<li style="background-color: #080;"></li>
<li style="background-color: #008;"></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet pharetra nunc at condimentum.</div>
</div>
</td>
</tr>
</table>
</div>
CSS：
.outer {
width: 200px;
border: 1px solid #0f0;
}
.bad-table {
width: 100%;
border: 1px solid #f00;
}
.target {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.wrapper {
width: 100%;
}
.wrapper.hack {
display: table;
table-layout: fixed;
}
ul.menu {
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
width: 100%;
}
ul.menu li {
display: inline-block;
width: 100px;
height: 50px;
padding: 0;
margin: 0;
}
(Fiddle)
请注意，在第一个示例中，菜单块导致表格（红色边框）扩展到其包含的 div（绿色边框）之外。与第二个示例相比，它使用了我的（违反标准的？）hack，成功阻止了父表的增长，同时还允许滚动菜单块。 （用 Chrome 和 Firefox 测试。）
注意以下限制：
- 我绝对不能在我注入的 div 之外编辑标记。这包括在我注入的 div 之外操作 DOM，因为我不知道我对其他人文档的更改可能会造成什么不良影响。
- 我注入的 div 的高度应基于其内容（根据正常的文档流），这意味着使用
position: absolute的解决方案往往会出现问题，因为它们会将我的内容从页面流中删除，使前面和/或以下内容与注入的 div 重叠。通常的解决方法（设置固定高度）意味着我的元素将无法适应其高度以匹配其内容。
这种破解方法是解决这个问题的合法方法，还是有更好的方法？
【问题讨论】：
-
外部 div 的宽度（本例中为 600px，演示中为 200px）是否已知？
-
@LGSon 不是。目标是让嵌入元素自动调整大小以填充其直接父元素的宽度，无论它可能是什么。