html - 防止元素拉伸(stretch)到其 flex 容器的 100% 宽度

Question

我有内联 block 元素，其宽度在 IE11 和 Safari 中延伸到其 flexbox 容器的 100%。但是，在 Chrome 和 Firefox 中，宽度是内容的宽度。

这jsfiddle说明了这个问题。

在 Safari 中使用 max-width: -webkit-max-content;，内联 block 元素的宽度恢复为内容的宽度。根据 caniuse.com，max-content 在 IE11 中不可用.

有没有办法在 IE11 中实现这种行为？

.row {
  display: flex;
}
section {
  display: flex;
  flex-direction: column;
  flex: 1 1 0px;
}
.btn {
  display: inline-block;
  position: relative;
  background: black;
  color: white;
  padding: 10px 40px 20px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin: auto auto 10px 0px;
}
.btn:after {
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  position: absolute;
  right: 11px;
  bottom: 11px;
  content: "";
  background: white;
}

<div class="row">
  <section>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    <a href class="btn">inline-block</a>
  </section>
  <section>
    <p>p into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pa</p>
    <a href class="btn">inline-block</a>
  </section>
  <section>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <a href class="btn">This is an<br>inline-block too</a>
  </section>
</div>

Answer 1

所有浏览器都忽略了 display: inline-block 规则。

因为.btn是一个flex item，它的display属性是由flex容器控制的。因此，没有理由在 flex 元素上使用 display 属性。

由于您在列方向的 flex 容器中，请使用 align-self: flex-start 让布局在 IE 中工作。

.btn {
  /* display: inline-block; */
  align-self: flex-start /* new */
  position: relative;
  background: black;
  color: white;
  padding: 10px 40px 20px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin: auto auto 10px 0px;
}

Revised Fiddle

重要说明

IE 有问题，但不是 display 属性。

您的 .btn 元素已经与 flex auto 边距对齐:

margin: auto auto 10px 0px;

margin-right: auto 组件用于在大多数浏览器中将按钮向左移动。这应该就是您所需要的。

但 IE11 不遵守此规则。这就是为什么需要 align-self: flex-start 作为后备。