IE11flex存在封装内容的问题-IE11flexissueswithwrappingcontent

作者：小北甜甜 | 来源：互联网 | 2023-05-19 08:07

Ihavethefollowingcodewhichhasfourcolumnswrappedover2rowsusingflex.Inchromeandfiref

I have the following code which has four columns wrapped over 2 rows using flex. In chrome and firefox, this works perfectly with the first item taking it's own row and then the second row, all the items match the tallest in that row.

我有下面的代码，用flex将四列封装在两行之上。在chrome和火狐浏览器中，第一个条目拥有自己的行，然后是第二行，所有条目都匹配这一行中最高的。

However in IE11, the items in the second row match the tallest item out of all 4 (rather than just on it's own row) meaning that there is a lot of white space created in the second row.

然而，在IE11中，第二行中的条目匹配了所有4个条目中最高的条目(而不仅仅是在它自己的行上)，这意味着在第二行中创建了大量的空白。

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  flex-basis: 100%;
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  flex-direction: column;
  display: flex;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grid-column:nth-child(1) .widget-article {
  flex-direction: row;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  flex-grow: 1;
}

.widget-article__content a {
  color: #ffffff;
}


  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017

Is there a way to make IE behave like chrome and firefox without changing the html structure?

有没有一种方法可以让IE像chrome和firefox一样不改变html结构?

2 个解决方案

#1

You can replace flexbox for most elements except .container using display: table. Result:

除了.container之外，您可以使用display: table替换flexbox中的大多数元素。结果:

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: table;
  height: 100%;
}

.widget-article > * {
  display: table-row;
}

.grid-column:first-child .widget-article > * {
  display: table-cell;
  vertical-align: top;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  height: 100%;
}

.widget-article__content a {
  color: #ffffff;
}


  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017
                
              
            
          
        
      
    
  
  
    
      
        
          
        
      
      
        
          
            
                        Crash-tested landscape furniture: why functional will no longer do...
                
          
        
        
          
            
              
                
                  CHRISTOPHER HAINES
                
                
                  MONDAY 5TH JUNE, 2017

#2

The problem in IE11 is that it uses the intrinsic height of the image.

IE11的问题在于它使用了图像的固有高度。

Although you've set the width of the image containers:

虽然您已经设置了图像容器的宽度:

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

... which is enough to get the layout to work in Chrome and Firefox, these rules are not enough to alter the image's natural dimensions in IE11.

…这足以让布局在Chrome和Firefox中运行，但这些规则还不足以改变图片在IE11中的自然尺寸。

So consider adding something like this to your code:

因此，考虑在代码中添加如下内容:

 /* pixel units for illustration purposes only */

.grid-column:nth-child(2) img {
  height: 250px;
}

.grid-column:nth-child(3) img,
.grid-column:nth-child(4) img {
  height: 125px;
}

jsFiddle demo

jsFiddle演示

Percentage heights are probably preferable to pixels, but that will take some work setting heights on ancestors. Since I don't know exactly what you want, I just used pixels for the demo. There may also be other sizing options you can use.

百分比高度可能比像素更高，但这需要对祖先进行一些设置。因为我不知道你想要什么，我只是用像素来演示。您还可以使用其他的分级选项。

But the bottom line is, you need to override the intrinsic dimensions of the image for the layout to work in IE11.

但最重要的是，你需要覆盖图像的固有维度，以便布局在IE11中工作。

推荐阅读

heap
阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾

本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]

蜡笔小新 2023-12-14 19:24:58
php
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
import
Python瓦片图下载、合并、绘图、标记的代码示例

本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

蜡笔小新 2023-12-13 12:14:55
import
使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例

本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤，可以获取到网站首页的新闻数据。代码示例使用Python编写，并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]

蜡笔小新 2023-12-12 19:16:21
php
php 主动断掉http,怎么在PHP项目中实现一个HTTP断点续传功能

怎么在PHP项目中实现一个HTTP断点续传功能发布时间：2021-01-1916:26:06来源：亿速云阅读：96作者：Le ... [详细]

蜡笔小新 2023-12-12 17:17:29
php
Oracle存储过程写法小例子及已命名的异常

本文介绍了Oracle存储过程的基本语法和写法示例，同时还介绍了已命名的系统异常的产生原因。 ... [详细]

蜡笔小新 2023-12-11 15:10:15
scala
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
php
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
config
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
java
正则表达式及其范例

为什么80%的码农都做不了架构师？一、前言部分控制台输入的字符串，编译成java字符串之后才送进内存，比如控制台打\， ... [详细]

蜡笔小新 2023-10-17 20:18:36
grid
CSS |网格行结束属性

CSS|网格-行-结束属性原文:https://www.gee ... [详细]

蜡笔小新 2023-10-17 15:21:56
grid
css元素可拖动,如何使用CSS禁止元素拖拽？

一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]

蜡笔小新 2023-10-17 14:35:15
php
php数据断网续传,让PHP支持断点续传的源码

比如第一次请求一个文件的从0到999字节，第二次请求1000到1999字节，以此类推，每次请求1000字节的内容，然后程序通 ... [详细]

蜡笔小新 2023-10-16 18:22:11
java
this prototype 闭包总结

this对象整理下思路：一般用到this中的情景：1.构造方法中functionA(){this.nameyinshen;}varanewA() ... [详细]

蜡笔小新 2023-10-16 13:42:47
php
C#导入、导出功能

导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]

蜡笔小新 2023-12-12 14:34:29

小北甜甜

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章