flex 属性在 IE 中不起作用 [英] flex property not working in IE

查看:53
本文介绍了flex 属性在 IE 中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have been unable to determine why flexbox is not working in IE 11.

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

For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.

Chrome 按预期工作;IE11 失败.

Chrome works as intended; IE11 fails.

在 Chrome 上运行的 layout-success 图片:

Image of layout-success running on Chrome:

IE11 上布局失败的图片

Image of layout-failure on 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;
}

<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>

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

推荐答案

IE 在解析 flex 属性时出现问题.

IE has a problem parsing the flex property.

以下是一些对我有用的解决方法:

Here are a few workarounds that have worked for me:

  • 使用简写属性而不是简写.

而不是这样的:flex: 0 0 35%.

试试这个:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: 35%
  • 确保 flex-shrink 已启用.

  • Make sure flex-shrink is enabled.

所以代替这个:flex: 0 0 35%

试试这个:flex: 0 1 35%

(在其他情况下flex-shrink 需要禁用:Flex项目与 IE11 中的另一个项目重叠)

(In other cases flex-shrink needs to be disabled: Flex item overlaps another item in IE11)

  • 使用 flex-basis

这可能取决于您的 IE11 版本.行为似乎各不相同.

This may depend on your version of IE11. Behavior appears to vary.

尝试这些变体:

  • flex: 1 1 0
  • flex: 1 1 0px
  • flex: 1 1 0%

注意!某些 css minifier 会将 0px 替换为 0,这对于调试来说可能是一件非常烦人的事情(但是,它们不会t 因某种原因改变 0%).

Beware! Certain css minifiers will replace 0px with 0, which can be a really annoying thing to debug (however, they won't change 0% for some reason).

此处有更多详细信息:

  • 代替 flex: 1 使用 flex: auto(或加入 flex-basis: auto)

  • Instead of flex: 1 use flex: auto (or add in flex-basis: auto)

如果您在 flex-direction: row 中使用 flex: 1(例如在较大的屏幕上),并且您切换到 flex-direction: 列 在媒体查询中(比方说对于移动设备),您可能会发现您的 flex 项目折叠起来.

If you're using flex: 1 in flex-direction: row (such as on larger screens), and you switch to flex-direction: column in a media query (let's say for mobile devices), you may find that your flex items collapse.

在您的媒体查询中,添加flex-basis: auto.这将覆盖 flex: 1 规则中的 flex-basis 值(通常是 00px0%,取决于浏览器).

In your media query, add flex-basis: auto. This will override the flex-basis value in the flex: 1 rule (which is usually 0, 0px or 0%, depending on the browser).

使用 flex: auto 应该也可以,它的缩写是:

Using flex: auto should also work, which is short for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto
  • 使用老式的width/height 属性代替flex.
  • 使用 block 布局而不是 flex 布局.

  • Use block layout instead of flex layout.

你不需要完全放弃 flex 布局.但是对于特定的容器,您可以使用 display: block 而不是 display: flex; 来完成工作.flex-direction: 列.

You don't need to completely abandon flex layout. But for a particular container you may be able to get the job done with display: block instead of display: flex; flex-direction: column.

例如,在需要使用填充技巧来响应性地将视频嵌入到 flex item 时,我遇到了障碍面临的问题是某些浏览器不能很好地处理 flex 容器中的百分比填充(或边距).

For example, in needing to use the padding trick to responsively embed a video in a flex item, the obstacle I faced was that some browsers don't work well with percentage padding (or margin) in a flex container.

为了让它工作,我从这个 flex 项目上切换了 display 值:

To make it work I switched the display value on the flex item from this:

/* a flex item, also a nested flex container */
#footer-container > article {
    display: flex;
    flex-direction: column;
}

为此:

#footer-container > article {
    display: block;
}

这篇关于flex 属性在 IE 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆