代码之家 › 专栏 › 技术社区 › user13286

flex不支持IE11中的calc

calc flexbox internet-explorer css3 css

user13286 · 技术社区 · 7 年前

我正在尝试使用Flexbox创建一个布局。在其中一个布局中,我需要3个等宽列。为了完成这一点,我正在使用 calc 设置列宽。这在现代浏览器中运行得很好,但在IE中当然不起作用。这是我的密码:

.container {
  width:50vw;
  margin:0 auto;
  display:flex;
}
  .container > div {
    flex:1 0 calc(100% / 3);
  }

<div class="container">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

正如我所提到的,这在现代浏览器中可以很好地工作,但是在IE中,列只是彼此折叠,除非我使用一个特定的百分比来代替 calc .

1 回复 | 直到 7 年前

Community Mohan Dere 6 年前

这是一个已知的错误。

calc() 中使用的函数 flex 速记声明。

因为这个错误只影响 弯曲

https://github.com/philipwalton/flexbugs#flexbug-8

所以,换言之,不是:

flex: 1 0 calc(100% / 3)

尝试:

flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);

功能。

flex: 1

或

flex: 1 0 30%

flex: 1 0 26%;

与 flex-grow: 1 定义在 弯曲 flex-basis 33.33%。

flex-grow 会占用线路上的空闲空间, 伸缩基准值 只需要足够大就可以强制换行(如果有必要的话)。

flex-basis: 26% ,有足够的空间放边距、边框、填充物等,但没有足够的空间放第四项。

推荐文章

Hala · 有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

4 年前

Error 1004 · 使用VBA从HTML中提取信息

8 年前

myroslav · IE11中Angular 4应用程序崩溃

8 年前

L Y E S - C H I O U K H Dumitru Boaghi · 在IE9/Angular 5/TypeScript上使用FormData,无需Ajax或jQuery

8 年前

Dhananjay C · Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

8 年前

jacob · 当操作url为跨原点时,Microsoft浏览器不会将表单发布到iframe

8 年前

Athar K · 工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

8 年前

adrien54 · 使用BlendColor过滤器的IE上的透明度问题

8 年前

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

8 年前

sankar · IE不显示abbr标记的边框底部

8 年前