gpt4 book ai didi

html - IE 中两个 div 之间的小 1px 间隙

转载 作者:行者123 更新时间:2023-11-28 01:07:21 25 4
gpt4 key购买 nike

在下面的代码中,所有内容都在 Chrome 和 Firefox 中正确显示。 inner 元素完全拉伸(stretch)到 outer

在 IE11 中,inner 元素没有完全拉伸(stretch)到容器中。并且像图片一样存在 1px 的间隙。 enter image description here

<!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>

  1. 为什么会这样?
  2. 如何解决?

UPD1。要重现它,您应该缩放页面。

最佳答案

我必须承认我不知道为什么会发生这种情况,但至少我找到了解决它的方法。

我想我可以使用 box-shadow: 0 0 0 1px black; 并删除边框,但这会以不同的方式缩放元素(IE 在渲染薄框阴影方面真的很糟糕,会产生比这更意想不到的结果)。将外部 div 设置为 overflow: hidden; 并在内部使用绿色 box-shadow 来填充空白也不起作用,box-shadow 被切断了。甚至 flexbox 和 float 内容也无济于事,这似乎不是盒子大小或行高问题。

唯一可行的方法是用 outline: 1px solid black; 替换边框

这对元素的缩放也不同,但可以通过添加 1px padding + box-shadow 方法来填充间隙来重新调整:

.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;
}

关于html - IE 中两个 div 之间的小 1px 间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52280910/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com