大家好，
我需要一些 CSS 方面的帮助。每当我点击网站上的任何图片时，.d-header 就会偏移大约 2 像素。我尽力尝试修复但未能成功。我不知道如何修复图片后方灰色区域的 CSS。
点击以下链接中的图片以查看问题：
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
5 个赞
有意思。我以前从未注意到这一点，但只要启用了固定头部且滚动条消失，大多数（如果不是全部）Discourse 官方主题也会出现这个问题。
这是否是一个近期出现的问题？
不，这种情况已经持续很多很多年了。我手头有一台 v1.6 用于测试，问题同样存在。
5 个赞
真糟糕。
@Pravi 我不该感谢你，现在我无法再无视那些多年来被我大脑忽略的问题了 
1 个赞
4 个赞
它似乎在滚动条消失且 body 具有 docked 类时出现（这与 header 为 sticky 的情况略有不同）。
1 个赞
真不敢相信，这么多年过去，只有我注意到了这一点 
。我已经把类别从“支持”改为了“错误”。
1 个赞
我认为问题出在：当滚动条消失时，系统会在 body 上应用 style="margin-right: 17px; overflow: hidden;" 以补偿滚动条宽度。但由于 .d-header 使用的是 fixed 定位，它并不会“继承” html 的 margin-right。
编辑：
看起来 html 的边距（等于滚动条宽度）是通过 jquery.magnific-popup.min.js 中的 JavaScript 计算得出的。
我不确定是否有快速且干净的解决方案来修复这个问题。
3 个赞
如果你还想要找其他令人烦恼的问题，作曲家也会遇到同样的情况 
问题在于，fixed 定位的元素是相对于视口宽度进行定位的，而滚动条会改变视口宽度。
正如 @Canapin 提到的，这在 <HTML> 元素上通过额外的边距进行了补偿（看起来像是 magnific popup 的行为？）。由于 fixed 定位的元素并非相对于 <HTML> 元素定位，因此作曲区和头部还需要额外的修复。
我们需要做的是获取滚动条的宽度，然后在弹出窗口激活时添加一些内联样式，例如：
.d-header {
left: -15px; /* 此示例中滚动条宽度为 15px */
width: calc(100% + 30px); /* 增加两倍滚动条宽度以补偿偏移和宽度 */
}
实现这个功能对我来说有点超出能力范围……我认为滚动条宽度可能是通过比较弹出窗口打开前后的页面宽度来计算的？我不太确定。
话虽如此……如果我们今年在放弃对 IE11 的支持后改用 position: sticky，这个问题将会稍微减轻一些。偏移将不再发生，但头部右侧可能会出现一个原本滚动条所在位置的空白间隙。
6 个赞
[quote=“awesomerobot, 帖子:11, 主题:149401”]
如果我们今年放弃对 IE11 的支持后改用 position: sticky[/quote]
我们可以设置一个书签提醒，以确保我们知道这件事发生吗？我是说 sticky 支持 
4 个赞
这个东西什么时候能修好？
我有个小修复方案给你，虽然还不完美，标题、分类和标题图标仍有一些移动，但顶部栏会保持固定。
在桌面端 CSS 中：
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
我还没有彻底测试过，这也不是官方方案，但目前你可以先试试看。我经验不足，一时想不出更好的解决办法。
2 个赞
原帖中提到的问题已不再出现，因为我们现在在头部使用了 position:sticky;。
3 个赞