对于一个非常简单的问题，我在 css 中遇到了关于 position:relative 的非常奇怪的错误。我正在尝试为网站制作一个基本的水平滚动图片库。我已经为移动版本完成了此操作，但出于某种原因，桌面等效项无法正常工作。
移动和桌面网站都使用以下结构:控制页面结构的 CSS 网格，作为图库容器的网格部分，然后是水平滚动网格，“图库”相对于图库定位容器。
在桌面版本中，画廊的宽度和高度不是相对于父 div 定义的，而是整个文档的宽度和高度，水平滚动不起作用.在移动设备上，宽度和高度属性已成功设置为相对于父级，并且水平滚动效果很好。
移动和桌面网站的 CSS 如下:
手机:
//grid
.textPage {
display: grid;
grid-template-columns: 20vw 50vw 20vw;
grid-template-rows: 5vh 45vh 22vh 10vh;
grid-auto-rows: 1fr;
grid-gap: 1em 1em;
}
....
.galleryContainer {
grid-area: 3 / 1 / 4 / 4;
padding-left: 20px;
padding-right: 20px;
}
.gallery {
height: 100%;
width: 100%;
overflow-x: scroll;
position: relative;
display: inline-block;
z-index: 10;
}
桌面:
//grid
.container {
display: grid;
grid-template-columns: 150px 150px minmax(300px, 1fr) 150px 150px;
grid-template-rows: 80px minmax(300px, 1fr) 50px;
grid-gap: 2em 2em;
height: 100vh;
margin: 0px !important;
}
....
.galleryContainer {
grid-area: 2 / 1 / 3 / 6;
padding-left: 20px;
padding-right: 20px;
}
.gallery {
height: 100%;
width: 100%;
overflow-x: scroll;
position: relative;
display: inline-block;
z-index: 10;
}
两组 div 都使用 JQuery 放置:我已经检查过，$gallery 已成功放置在 $galleryContainer 中。
$galleryContainer = $('<div/>', {
class: 'galleryContainer',
})
.appendTo( '#mainContainer' );
$gallery = $('<div/>', {
class: 'gallery',
})
.appendTo( $galleryContainer );
可以使用以下方法重现该错误:
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body>
<div id="mainContainer" class="container">
</div>
<script>
$galleryContainer = $('<div/>', {
class: 'galleryContainer',
})
.appendTo( '#mainContainer' );
$gallery = $('<div/>', {
class: 'gallery',
})
.appendTo( $galleryContainer );
</script>
</body>
<style>
.container {
display: grid;
grid-template-columns: 150px 150px minmax(300px, 1fr) 150px 150px;
grid-template-rows: 80px minmax(300px, 1fr) 50px;
grid-gap: 2em 2em;
height: 100vh;
margin: 0px !important;
}
.galleryContainer {
grid-area: 2 / 1 / 3 / 6;
background-color: pink;
padding-left: 20px;
padding-right: 20px;
}
.gallery {
height: 100%;
width: 100%;
overflow-x: scroll;
position: relative;
display: inline-block;
z-index: 10;
background-color: lightblue;
}
</style>
我还检查了没有其他 css 覆盖桌面站点上的 div。附上桌面问题截图，.galleryContainer设置为background-color: pink，.gallery设置为background -颜色:蓝色。我在控制台中没有收到任何错误消息，并且当我查看 Web 检查器时，所有的 css 属性都符合预期。
这是手机的截图，以展示我的目的。
非常感谢!我真的被这个难住了+感谢任何帮助。
最佳答案
所有新网页都需要文档类型或 DTD(文档类型定义)来告诉浏览器在哪种浏览器模式下呈现您的页面。如果没有，则假定在 "quirks mode" 中。这就像 1999 年一样，一个你不想去的地方 the box model used 将基于很久以前的错误，不会与当前标准相同。
框模型用于确定内容宽度、边距和填充。自 1990 年代以来，这种情况发生了变化，浏览器，特别是 IE，现在都遵循正确的盒子模型。
关于jquery - 位置为 :relative (just Chrome+Safari, 的神秘 css 错误不是 Firefox)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57181508/