IE浏览器的CSS错误：影响父母身高的IMG原始高度 [英] IE CSS bug: IMG original height affecting parent height

问题描述

我有一个PARENT flexbox div（它也是列flexbox的一部分）：

  div.flex_block { 
宽度：100％; 
 flex：1 1 auto; 
 display：flex; 
 flex-direction：row; 
 align-items：center; 
 justify-content：space-between; 
 padding-bottom：30px; 
 
 $ / code> 

包含2个孩子：



  .flex_block .content {
 max-width：none; / *覆盖其他代码* / 
 flex：0 1 50％; 
} 
 
 .flex_block .image {
最大宽度：无; / *覆盖其他代码* / 
 flex：0 1 35％; 
 
 $ / code> 

第一个孩子里面有一些文字。
第二个有一个超大的图像，设置为100％的宽度，所以它收缩到它的容器。

  .flex_block .image img {
 display：block; 
宽度：100％; 
 height：auto; 
} 
  

在Chrome浏览器中按预期工作，但在IE中，原始img的高度似乎展开PARENT容器（即使缩小以适应其容器）。
如果我设置了img的高度，问题就解决了。 AUTO不能解决它。
我需要这个作为一个响应式设计，显然，所以我不希望以像素为单位设置高度。

下面是发生什么的可视化：

解决方案

  flex-shrink：0; 
  

或者更具体到IE11：

  -ms-flex-negative：0; 
  

这似乎解决了我的问题，但是您的结果可能会有所不同。 b

我不会假装理解为什么有效，但它似乎对我有用。 ：）

I've got a PARENT flexbox div (which is also part of a column flexbox):

div.flex_block {
        width:100%;
        flex: 1 1 auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;  
        padding-bottom:30px; 
}

It contains 2 children:

.flex_block  .content{
    max-width:none; /* override other code */
    flex: 0 1 50%;
}

.flex_block  .image{
    max-width:none; /* override other code */
    flex: 0 1 35%;
}

The first child has some text in it. The second has an oversized image, that is set to 100% width, so it shrinks to its container.

.flex_block  .image img{
    display:block;
    width:100%;
    height: auto;
}

It works as expected in Chrome, but in IE the original img's height seems to expand the PARENT container (even though it does shrink to fit its container). If I set the img height, the problem is fixed. AUTO doesn't fix it. I need this as a responsive design, obviously, so I don't wish to set the height in pixels.

Here is a visualisation of what happens:

I've also tried using inline elements with percentage widths instead of a flexbox, but the issue prevailed.

解决方案

A possible solution to add to container:

flex-shrink: 0;

Or more specific to IE11:

-ms-flex-negative: 0;

This seems to have fixed my issue, but your results may vary.

I don't pretend to understand why it works, but it seems to be working for me. :)

这篇关于IE浏览器的CSS错误：影响父母身高的IMG原始高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！