带有位置的神秘 css 错误：相对（仅 Chrome + Safari，而不是 Firefox）

Question

对于一个非常简单的问题，我在 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-color: blue 。 我在控制台中没有收到任何错误消息，并且当我查看 Web 检查器时，所有 css 属性都符合预期。

孩子满溢的父母

这是手机的一张照片，以显示我要做什么。

幸福和成功

非常感谢！ 我真的被这个+任何帮助都难住了。

Answer 1

所有新网页都需要 doctype 或 DTD（文档类型定义）来告诉浏览器在哪种浏览器模式下呈现您的页面。如果没有，则假定处于“怪癖模式” ，就像 1999 年一样并且您不想进入的地方，因为使用的盒模型将基于很久以前的错误，并且与当前标准不同。

框模型用于确定内容宽度、边距和填充。 自 1990 年代以来这种情况发生了变化，浏览器，特别是 IE，现在遵循正确的框模型。

更详细的信息在这里

带有位置的神秘 css 错误：相对（仅 Chrome + Safari，而不是 Firefox）

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-24 14:07:03

带有位置的神秘 css 错误：相对（仅 Chrome + Safari，而不是 Firefox）

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-24 14:07:03

解决方案1
1 已采纳 2019-07-24 14:07:03