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

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

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

本地相同

如您所见，在本地相同的值在我的本地要高得多。

Answer 1

问题是文本行。因为我有基于百分比的位置，所以它是根据页面的总高度计算的。因为我的本地有更多的内容/Lorem Ipsum，这个百分比明显不同于只有更少内容的现场。