Question

该图像部分包含两个图像，浅绿色方形图像和另一个图像，具有不同的高度和高度像素。彼此相距宽度，它们被包裹在带有柔性CSS的盒子中，以精确对齐下部图像，具有完全相同的响应宽度。 display：flex是我最后的选择，在尝试使用display：table或float样式失败之后，它们几乎可以实现响应对齐，但在某些情况下不能完美地适应较低的图像宽度小于1px。所以显示：在我注意到浏览器兼容性问题之前，flex很不错。 Firefox，Chrome很好，ms边缘也不错，但是Internet Explorer 10（或11？）有一个问题，不是小问题，而是大问题。我在Windows 8上观看了这个问题。这两个图像在IE上是分开的，它们被放大并且在它们之间有新的线。我没注意到，直到观看IE屏幕，因为chrome，safari和Firefox开发工具上的用户代理模拟器没有显示问题。

我试图避免已知问题。我只是将display flex应用于包装div和flex数字给孩子们。

摘录：https://jsfiddle.net/83kcu03L/2/（稍加修改后的版本为https://jsfiddle.net/83kcu03L/5/）

    body{
  width:98%;
}
div{
  margin:0;
  padding:0;
}
#div1,#div2{
  width:50%;
  border:1px solid #333;
}
#div3{
    display: -webkit-flex;
    display: flex;
      border:1px solid #333;
      background-color:red;
}
#div4-1{
    -webkit-flex: 120%;
    -ms-flex: 120%;
    flex: 120%;
}
#div4-2{
    -webkit-flex: 398%;
    -ms-flex: 398%;
    flex: 398%;
}
#div5-1,#div5-2{
    vertical-align: bottom;
    width: 100% !important;
}
img{
     width: 100% !important;
}
#div13{
        border:1px solid #333;
      background-color:red;
}


    <body>
<div id="div1">1
<div id="div2">2

<div>

<div id="div3">3
<div id="div4-1"><a><img id="div5-1" src="http://via.placeholder.com/89x89/0f0"></a></div>
<div id="div4-2"><a><img id="div5-2"  src="http://via.placeholder.com/295x89/00f"></a></div>
</div>

<div id="div13"><div><a><div>
<img src="http://via.placeholder.com/600x144/a3f">
</div></a>
</div>
</div>

</div>

</div>
</div>
</body>

在这里，弹性框中的图像会在IE10上放大并溢出（和IE11？）。

IE模拟器的结果如下： enlarged and overflowed on IE10

如何解决此问题？

Internet Explorer的Flex框内容溢出修复程序？

0 个答案: