html – 防止div扩展父表的宽度

概述我正在开发一个项目,我将把标记注入我无法控制的页面(嵌入脚本).一个有趣的案例出现了,我的注入div包含在一个表中.我的div的子节点是一个水平菜单,当它超出父元素的宽度时应该滚动(overflow-x：auto),但是如果父元素是没有table-layout的表：fixed,我注入的内容而是导致父表扩展,可怕地打破一些布局. 在这种情况下,表包含在固定宽度的div中,如下所示： <div sty 我正在开发一个项目,我将把标记注入我无法控制的页面(嵌入脚本).一个有趣的案例出现了,我的注入div包含在一个表中.我的div的子节点是一个水平菜单,当它超出父元素的宽度时应该滚动(overflow-x：auto),但是如果父元素是没有table-layout的表：fixed,我注入的内容而是导致父表扩展,可怕地打破一些布局.

在这种情况下,表包含在固定宽度的div中,如下所示：

<div >  <table wIDth="100%">    <tr>      <td>        <div> <!-- my content --> </div>      </td>    </tr>  </table></div>

我发现在表上设置table-layout：fixed修复了这个问题.但是,这个标记是我无法控制的 – 我只能从最里面的div开始更改标记/ CSS.

我找到了一个有效的黑客：设置宽度：100％;显示：表; table-layout：fixed;在我的div.但是,我不确定这是否符合任何相关的规范,因为这个显示的内容：table div都是display：block.

这是标记,重现问题,并演示黑客：

<div >  <table >    <tr>      <td>        <div >          <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam imperdIEt pharetra nunc at condimentum.</div>          <div >            <ul >              <li ></li>              <li ></li>              <li ></li>              <li ></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 >  <table >    <tr>      <td>        <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.通常的解决方法(设置固定高度)意味着我的元素将无法适应其高度以匹配其内容.

这种黑客是解决这个问题的合法方式,还是有更好的方法？

解决方法 桌子总是很棘手,但是我使用了位置：在很多情况下绝对成功,所以我的答案/问题是：这对你有用吗？

请注意,包装器只是一个包装器,应该只包含目标,因此所有内容都会进入目标,否则目标将与其兄弟重叠,除非设置了固定的边距/填充.

.outer {  wIDth: 200px;}.bad-table {  wIDth: 100%;}.wrapper {  position: relative;}.target {  position: absolute;  left: 0;  top: 0;  wIDth: 100%;  height: auto;  overflow: auto;}ul.menu {  List-style: none;  table-layout: fixed;  padding: 0;  margin: 0;  white-space: nowrap;  wIDth: 100%;}ul.menu li {  display: inline-block;  wIDth: 100px;  height: 50px;  padding: 0;  margin: 0;}

<div >  <table >    <tr>      <td>        <div >          <div >                                <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam imperdIEt pharetra nunc at condimentum.</div>            <ul >              <li ></li>              <li ></li>              <li ></li>              <li ></li>            </ul>            <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam imperdIEt pharetra nunc at condimentum.</div>          </div>        </div>      </td>    </tr>  </table></div>

为了比较,这里是使用display：table的相同代码片段

.outer {  wIDth: 200px;}.bad-table {  wIDth: 100%;}.wrapper {  wIDth: 100%;  display: table;  table-layout: fixed;}.target {  overflow: auto;}ul.menu {  List-style: none;  table-layout: fixed;  padding: 0;  margin: 0;  white-space: nowrap;  wIDth: 100%;}ul.menu li {  display: inline-block;  wIDth: 100px;  height: 50px;  padding: 0;  margin: 0;}

<div >  <table >    <tr>      <td>        <div >          <div >                                <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam imperdIEt pharetra nunc at condimentum.</div>          </div>        </div>      </td>    </tr>  </table></div>

更新

经过一些更多的测试,并阅读这些,

> https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
> Is a DIV inside a TD a bad idea?

我找不到任何其他方法来解决这种情况,所以如果你的内容div的内容需要具有正常流量的不受控制的外部div / table之前和之后的内容,position：absolute可能不起作用取决于页面的其余部分已设置,但显示：table; table-layout：固定会.

根据以上消息来源,使用display：table1应该没有任何合规性问题,虽然你需要测试主要浏览器中的行为,因为它们都可以处理div内部td的不同(我测试过Chrome,FF,Edge,windows上的IE11,全部工作).

1具体来说,这个文本允许直接在display：table元素内部显示：block元素,因为中间的table-row和table-cell框会自动创建为匿名：

Generate missing child wrappers: If a child C of a ‘table’ or ‘inline-table’ Box is not a proper table child,then generate an anonymous ‘table-row’ Box around C and all consecutive siblings of C that are not proper table children. If a child C of a row group Box is not a ‘table-row’ Box,then generate an anonymous ‘table-row’ Box around C and all consecutive siblings of C that are not ‘table-row’ Boxes. If a child C of a ‘table-row’ Box is not a ‘table-cell’,then generate an anonymous ‘table-cell’ Box around C and all consecutive siblings of C that are not ‘table-cell’ Boxes.

总结

以上是内存溢出为你收集整理的html – 防止div扩展父表的宽度全部内容，希望文章能够帮你解决html – 防止div扩展父表的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。