时间戳

首页 > 解决方案 > IE11 中图像的 CSS 问题中心和“最大宽度”

html - IE11 中图像的 CSS 问题中心和“最大宽度”

问题描述

我有一个基本的图像拇指，可以在 Firefox/Chrome 中正常工作，但在 IE11 中不起作用。

形象max-width不受尊重，照原样大放异彩。

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 0/0 a;
    height: 4.5rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #9E9E9E;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 6px #BDBDBD;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
    text-align: center;
}

.thumb img { 
   display: inline-block;
    max-height: 90%;
    max-width: 90%;
}
<div class="thumb" >
  <img src="https://via.placeholder.com/250x90">
</div>

在此处输入图像描述

标签： htmlcssinternet-explorerflexbox

解决方案

尝试添加：min-width:1px;到您的图像。这是 IE 的一个已知错误。

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 0/0 a;
    height: 4.5rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #9E9E9E;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 6px #BDBDBD;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
    text-align: center;

}

.thumb img { 
   display: inline-block;
    max-height: 90%;
    max-width: 90%;
    min-width:1px;
}
<div class="thumb" >
  <img src="https://via.placeholder.com/250x90">
</div>

推荐阅读