IE中两个div之间的1px小间距

Question

In the code below, all is displayed correctly in Chrome and Firefox. 在下面的代码中，所有内容均可在Chrome和Firefox中正确显示。 The inner element fully stretched to the outer . inner元素完全伸展到outer 。

In IE11, the inner element is not fully stretched to the container. 在IE11中， inner元素未完全拉伸到容器。 And there is exist 1px gaps like on a picture. 并且在图片上存在1px的间隙。

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .outer { background-color: yellow; border: 1px solid black; } .inner { background-color: green; } </style> </head> <body> <div class="outer"> <div>Outer</div> <div class="inner">Inner</div> </div> </body> </html>

Why does it happen? 为什么会发生？
How to fix it? 如何解决？

UPD1. UPD1。 To reproduce it, you should zoom the page. 要重现它，您应该缩放页面。

Answer 1

I must admit that I have no idea why this happens, but at least I've found a way to fix it. 我必须承认，我不知道为什么会发生这种情况，但是至少我已经找到一种解决方法。

I thought I could use box-shadow: 0 0 0 1px black; 我以为我可以使用box-shadow: 0 0 0 1px black; and remove the border, but this scales the element differently (and IE's really bad at rendering thin box-shadows, would produce more unexpected results than this). 并删除边框，但是这会以不同的方式缩放元素（IE很难渲染薄的盒子阴影，比这会产生出乎意料的结果）。 Setting the outer div to overflow: hidden; 将外部div设置为overflow: hidden; and using a green box-shadow on the inner one to fill the gap didn't work too, box-shadow got cut off. 并且在内部的阴影上使用绿色的盒子阴影来填补空白也不起作用，盒子阴影被切断了。 Even flexbox and floating stuff didn't help, and it seems not like a box-sizing or line-height issue. 甚至flexbox和浮动内容也无济于事，这似乎不像是框大小或行高问题。

The only thing that worked is replacing the border with outline: 1px solid black; 唯一有效的方法是用outline: 1px solid black;替换边框outline: 1px solid black;

This scales the element different too, but it can be readjusted by adding a 1px padding + the box-shadow approach to fill the gap: 这也会使元素的缩放比例不同，但是可以通过添加1px填充+框阴影方法来填充来重新调整它：

.outer {
    padding: 1px;
    background-color: yellow;
    outline: 1px solid black;
    outline-offset: -1px;
    overflow: hidden;
}

.inner {
    background-color: green;
    box-shadow: 0 2px 0 green;
}

IE中两个div之间的1px小间距

问题描述

1 个解决方案

解决方案1
0 2019-07-05 13:55:39

IE中两个div之间的1px小间距

问题描述

1 个解决方案

解决方案1 0 2019-07-05 13:55:39

解决方案1
0 2019-07-05 13:55:39