4

注意：不要关注这段代码的目的，它只是一个极简的例子来突出遇到的问题。

当我使用该box-shadow属性时，它有时不适合元素的侧面，导致元素与其阴影之间的边距为 1px（或更少）。这是一个示例，transform用于提出问题（我认为这不是解决问题的唯一方法）：

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}
<h1><a href="#">Foo</a></h1>

如果您没有看到任何内容，请尝试查看全屏片段，然后调整您的浏览器大小（我遇到了 Chrome 和 Firefox 的问题）。下面是我制作的几张截图的图片，以及（明显的）预期结果：

在此处输入图像描述

有人遇到过这个问题吗？
看起来像浏览器，但我们能找到一种解决方法来避免这些边距吗？

编辑

我发现了一些新的东西：如果我在单边设置了一个盒子阴影，那么使用 Chrome 就不会出现间隙（它仍然存在于 Firefox 中）：

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 20px); 
}
h1 a {
  color: white;
  text-decoration: none;
}
h1:nth-child(2) {
  box-shadow: 30px 0 0 black;    
}
h1:nth-child(3) {
  box-shadow: -30px 0 0 black;    
}
<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>

在此处输入图像描述

4

2 回答 2

0

使用 Chrome 版本 42.0.2311.90 m

当浏览器分辨率发生变化（从大约 25% 到 500%）并且
平移 y 轴为 0 或 0px
时，就会出现间隙。示例代码：

    transform: translate(0.5px, 0); 
    transform: translate(0.5px, 0px); 
    transform: translate(7px, 0); 
    transform: translate(7px, 0px);

使用 zessx 的EDIT，在输出中显示 3 个示例，我得到了与他相同的结果

    transform: translate(0.5px, 20px);

但是当我在任一轴上删除一个“px”时，就没有间隙了。例子：

    transform: translate(0.5px, 20);
    transform: translate(0.5px, 1);
    transform: translate(0.5, 20px); 
    transform: translate(0, 20px);

如zessx所述，随着Chrome中分辨率的变化，间隙移动（从L到R消失）仅适用于两侧的阴影框

于 2015-04-14T09:34:59.147 回答
0

这个 CSS 有效：

h1 {
  width: 100px;
  text-align: center;
  margin: 0px;
  background: green;
  box-shadow: 30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}

这是一个小提琴。您使用的颜色（黑底黑字）与您看到的略有不同。改变颜色就可以了。

于 2015-04-09T17:17:21.427 回答