Internet Explorer 为表格提供了巨大的负宽度答案

【问题标题】：Internet Explorer gives table enormous negative widthInternet Explorer 为表格提供了巨大的负宽度
【发布时间】：2016-12-17 13:10:54
【问题描述】：

我有以下代码，它本质上代表一个隐藏/显示内容的按钮。

我想展示的具体内容是一个包含两列的表格，每列都有一个列表。其中一个列表具有特殊的列表样式。

问题是，当我单击文本展开正文时，IE 使表格的宽度为 -180,000 像素，并在屏幕外展开，并带有一个巨大的滚动条。如果我折叠主体并再次展开它，它就可以正常工作。

<style>
	ul {
		list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHAQMAAAD6aRWtAAAABlBMVEX///+AgIBizNOVAAAAAXRSTlMAQObYZgAAABdJREFUeF49wSEBAAAAg7D3T4zkim30BCumBNn/PQx4AAAAAElFTkSuQmCC');
	}
	.theBody {
		display: none;
	}
</style>

<div class="clicker">Click me</div>
<div class="theBody">
	<table>
		<tr>
		  <td>
			<ul>
			  <li>x</li>
			</ul>
		  </td>
		  <td>
			<ol>
			  <li>y</li>
			</ol>
		  </td>
		</tr>
	</table>
</div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
	$(".clicker").click(function (e) {
		$(".theBody").toggle();
	});
</script>

你可以在这里看到结果（不要使用上面的 Stack-Overflow 生成的预览，至少对我来说它不会在那里重现）：http://output.jsbin.com/kesapinuxa/1/ （您必须等待几秒钟才能加载脚本，然后在 IE 11 中单击文本）。

我已将代码归结为基本要素。如果我删除列表样式图像，它会起作用。如果我最初删除 display:none，它可以工作。如果我删除任何一个列表，它就会起作用。即使我改变了列的顺序，它也可以工作。

知道是什么原因造成的吗？

谢谢！

【问题讨论】：

不要使用上面的 Stack-Overflow 生成的预览 为什么？它展示了您正在谈论的问题。是否还有其他不属于问题的事情发生？
对我来说，它不会在 IE 中重现。您是否看到它重现了与我提供的链接相同的巨大滚动条？
奇怪，我似乎无法使用 JSBin 或 sn-p 在 IE 11.0.9600.18282 中重现它。
尝试等待大约 5 秒钟，然后单击 JSBin 中的文本。我已经让几个人进行了复制。我有 IE 11.0.9600.18378
我没有骰子，也许是回归？我无法让 Windows 更新完成加载，尝试更新我的 IE VM。 :-/

标签： html css internet-explorer

【解决方案1】：

我有一个类似的错误，由 flexbox 与类似表格的 div 的交互引起，并通过向其中一个包装器添加宽度来修复它。它与您的错误不同，但也许这会帮助其他人解决这个问题。

x-field div 在 IE 开发人员工具中显示的计算宽度为 -184070.03px（注意负号），但在 Chrome 中它会正常流动并遵守 100% 宽度属性。

这是我的代码：

<style type="text/css">
    /* All 6 of the below properties must be present for the bug to happen */
    .group {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
    .x-field {
        display: table;
        table-layout: fixed;
        width: 100% !important;
    }


    .wrap {
        /* width: 100%; */ /* This fixes it - uncomment */
    }

    /* add borders to visually see the bug without F12 */
    div.group {
        border: 1px solid blue;
    }
    .x-field {
        border: 1px solid red;
        border-radius: 10px;
    }
</style>

<div class="group">
    <div class="wrap"> <!-- Removing this div fixes it, but my original markup requires this div so that's not a viable fix. -->
        <div class="x-field">Field</div>
    </div>
</div>

【讨论】：