Safari 中不需要的水平填充 & Chrome div 内的图像之间

Question

我试图在 div 的宽度上显示 3 张图像，它们之间没有边距或填充。它在 Firefox 中有效，但在 Chrome 或 Safari 中无效，因此这两个浏览器在图像之间放置了填充，从而将第三个图像推到前两个图像下方。

div 所在的容器为 650 像素宽。图像的宽度为 217、217 和 216 像素。我已尝试 css 在 div 和 individual 图像中将水平边距和填充设置为 0，但它不起作用。我试着从一张图片上削掉几个像素，但也没用。我还尝试将显示设置为内联。我唯一可行的解决方案是将 3 张图像合并为 1 张，因此图像的总 650 像素宽度位于 div 范围内。所有 3 个浏览器都是当前版本。

<div class="wrap mb16">
    <div class="main column">
        <div class="mb06"">
            <img src="images/method-1.jpg">
            <img src="images/method-2.jpg">
            <img src="images/method-3.jpg">
        </div>
    </div>
</div>

.wrap { 
    width: 980px;
    margin: 0 auto;
    display: table;
    }
.main { 
    width: 650px;
    background: #FCFCFC;
    padding-left: 75px;
    padding-right: 75px;
}
.column { 
    display: table-cell;
    vertical-align: top;
}
.mb06 {
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
}
.mb16 {
    margin-bottom: 25px;
    margin-bottom: 1.6rem;
}

我原以为 Firefox、Chrome 和 Safari 的行为相同，并连续显示所有 3 个图像，中间没有任何填充。

Answer 1

有什么理由不使用 flexbox 样式吗？我在 Chrome 浏览器上看到图像边对边排列着：

.mb06 {
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
    /* Flex styling */
    display: flex;
    justify-content: center; // optional to center the three images together in this wrapper
}

您可以在此处阅读它提供的其他选项：https://www.w3schools.com/css/css3_flexbox.asp

Safari 中不需要的水平填充 & Chrome div 内的图像之间

Unwanted horizontal padding in Safari & Chrome between images inside div

safari

padding