相关疑难解决方法(0)

Flex容器中的文本不会在IE11中换行

请考虑以下代码段:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

在Chrome中,文本按预期包装:

但是,在IE11中,文本没有包装:

这是IE中的已知错误吗？(如果是,将指示指针)

有一个已知的解决方法吗？

这个类似的问题没有明确的答案和官方指针.

css internet-explorer css3 flexbox internet-explorer-11

Mis*_*hko

2017 11-10

153
推荐指数

4
解决办法

8万
查看次数

flex属性在IE中不起作用

我一直无法确定为什么flexbox在IE 11中不起作用.

为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.

Chrome按预期工作; IE11失败了.

在Chrome上运行的布局成功图像:

IE11上布局失败的图像

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

Run Code Online (Sandbox Code Playgroud)

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

html css css3 flexbox internet-explorer-11

Diz*_*izz

2017 09-23

20
推荐指数

2
解决办法

2万
查看次数