IE 11 中这些 div 的宽度发生了啥变化，我该如何解决？

Posted 2023-03-06

【中文标题】IE 11 中这些 div 的宽度发生了啥变化，我该如何解决？

【英文标题】：What is happening to the width of these divs in IE 11, and how can I fix it?IE 11 中这些 div 的宽度发生了什么变化，我该如何解决？

【发布时间】：2018-07-01 18:06:52

【问题描述】：

如果您在 IE 11 中查看http://jsbin.com/tacabepaju/1/edit?html,css,output，您会看到红色框非常宽，而其父级甚至更宽（反过来导致其父级超宽）。 Chrome 和 Firefox 会按预期呈现这些 div。

是什么导致红色 .table div 在 IE 中如此宽，为什么它的父级更宽？我该如何解决这个问题？

jsbin 中的代码是我在生产中处理的精简版本。

.column 
  position: relative;
  width: 83.33333%;


.container 
  display: flex;


.picker 
  display: flex;
  flex-grow: 1;


.table 
  position: relative;
  display: table;
  width: 100%;
  table-layout: fixed;
  border-color: red;
   

【参考方案1】：

您可以通过将 box-sizing CSS 属性设置为 border-box

来解决此问题

body * 
  padding: 20px 10px;
  border: 1px solid;
  font-family: sans-serif;
  position: relative;
  box-sizing: border-box;

您可以查看此文档https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 了解有关 box-sizing 的更多信息。

【讨论】：

修复了最后一个元素的轻微溢出，但对于 OP 询问的更大的 IE 错误并没有什么影响

【参考方案2】：

您也应该将.card 设置为display:flex，或者如果出于某种原因您希望.picker 成为弹性容器而不是弹性项目，则将其设置为flex: 1 1 100%;。

【参考方案3】：

我得到了我假设是你想要的结果，使用以下：

.card 
  display: flex;
  flex-grow: 1;


.container 
  display: flex;
  flex-grow: 1;


.picker 
  display: flex;
  flex-grow: 1;


.table 
  /* position: relative; */
  display: flex;
  width: 100%;
  table-layout: fixed;
  border-color: red;

我注意到问题始于 .card 元素，它没有包含 CSS，并且是第一个扩展到其父元素边界之外的元素，.picker 和 .table 的子元素紧随其后.

我不确定您在 display: table 上的灵活性如何——如果这是必要的，那么您可以将其更改为 display: flex，但我认为您需要一直使用 flex 才能使其表现良好。

免责声明：我自己并没有大量使用 flexbox。