html - Internet Explorer 给表格巨大的负宽度

Question

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

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

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

<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 ，它就可以工作。如果我删除其中任何一个列表，它就会起作用。即使我更改列的顺序，它也有效。

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

谢谢!

Answer 1

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

x 字段 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>