CSS 实时服务器上的百分比值需要与本地上的不同

Question

我有一个 drupal 7 网站，我有一个页面包装器 <div> 来填充页面。

<div id="page-content">
    all the html in here.
</div>

使用 CSS，我在上面放了一张背景图片 div#page-content

div#page-content {
    background-image: url('somelinktoimageurl');
    background-position: 120% 10%;
}

我在本地服务器上有相同的站点，其设置与实时站点相同。但是，在实时站点上，需要更改 background-position 百分比值以使其与我本地站点上的位置相同。本地站点和实时站点之间需要不同的百分比值才能将图像放在同一位置。我真的不知道为什么会这样。这在我身上发生过一次，但我只是更改了现场网站上的价值并接受了它。但是这次我想知道为什么会这样。

注意：实时站点和本地站点在相同的浏览器 Firefox 和 Chrome 中查看。

我在下面添加了一些截图，我打开了 devtools 的 livesite 屏幕截图显示了位置值

本地相同

正如您在本地看到的，相同的值在我的本地要高得多。

Answer 1

问题出在文本行上。因为我有基于百分比的位置，所以它是根据页面的总高度计算的。由于我在本地有更多 Content/Lorem Ipsum，因此百分比明显不同于内容较少的直播。

CSS 实时服务器上的百分比值需要与本地上的不同

CSS percentage value needs to be different on live server than on local

html

css

drupal-7