图像的最大宽度在IE 11的flexbox中不起作用，但在谷歌浏览器中有效

问题描述 投票：0回答：1

我正在使用flexbox创建2 x 2的网格布局，其中第一列项目如下所示合并在一起：

enter image description here

这可以在Google Chrome浏览器中正常运行。图像可以增长，直到flexbox分配的最大剩余宽度为止。但是，它在IE11中不起作用。图片拉伸了其容器框，我一直在谷歌搜索，尝试各种解决方案都无济于事。看来我的案子与其他类似问题有点不同。

以下是IE中的外观：enter image description here

您能帮我发现问题吗？我提供了一个插件，您可以在其中尝试解决方案。

CSS：

        body {
          width: 100%;
        }

        .element {
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 100px;
            font-weight: bolder;
        }

        .detail-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1 0 0;
            width: 100%;
        }

        .detail {
            display: flex;
            flex: 1 0 0;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .detail img {
            max-width: 100%;
        }

        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }

HTML：

    <div class="element">
        <div class="name">name</div>
        <div class="detail-wrapper">
            <div class="detail">
                <img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
            </div>
            <div class="detail">
                <a href="#">url</a>
            </div>
        </div>
    </div>

https://plnkr.co/edit/q6Xme6ETvW20Gw57CIWQ?p=preview

html css flexbox internet-explorer-11
1个回答
0
投票

IE浏览器在Flex上存在一些问题。使用flex无法正确计算值。

（1）我建议您将。detail img类中的max-width替换为width。

（2）我建议您将。detail类中的flex：1 0 0;替换为flex：0 0 auto;。

编辑：-

在一个额外的div内添加了img标签，通过@Xegara通知解决了该问题。它也适用于max-width对于IE 11浏览器。

修改后的代码：

<!DOCTYPE html>
<html>

<head>
    <script src="script.js"></script>
    <style>
        body {
          width: 100%;
        }
        
	.extra_div{
          width: 100%;
        }

        .element {
            display: flex;
            flex-direction: row;
            width: 100%;
		
        }
        
        .name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 100px;		
            font-weight: bolder;
        }
        
        .detail-wrapper {
            display: flex;
            flex-direction: column;
           /*flex: 0 0 auto;*/
		
            width: 100%;
        }
        
        .detail {
            display: flex;
            /*flex: 1 0 0;*/
            flex: 0 0 auto; /*-------------------------made change here */
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .detail img {
            max-width: 100%;   /*-------------------------made change here */
        }
        
        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }
    </style>
</head>

<body>
    <div class="element">
        <div class="name">name</div>
        <div class="detail-wrapper">
            <div class="detail">
		<div class="extra_div">
                	<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
		</div>
            </div>
            <div class="detail">
                <a href="#">url</a>
            </div>
        </div>
    </div>
</body>

</html>

IE 11中的输出：

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.