Jquery 带有position:relative的神秘css错误（仅限于Chrome&x2B；Safari，而非Firefox）_Jquery_Css

Jquery 带有position:relative的神秘css错误（仅限于Chrome&x2B；Safari，而非Firefox）

jquery css

Jquery 带有position:relative的神秘css错误（仅限于Chrome&x2B；Safari，而非Firefox）,jquery,css,Jquery,Css,对于一个非常简单的问题，css中的position:relative出现了非常奇怪的bug。我正在尝试为一个网站制作一个基本的水平滚动图像库。我已经为移动版做了这项工作，但由于某些原因，桌面版无法工作移动和桌面站点都使用以下结构：一个控制页面结构的CSS网格，一部分网格用作库容器，然后是一个水平滚动网格，即相对于库容器定位的“库” 在桌面版本中，库的宽度和高度不是相对于父div定义的，而是整个文档的宽度和高度，水平滚动不起作用。在移动设备上，宽度和高度属性相对于父对象成功设置，水平滚动效果很好

对于一个非常简单的问题，css中的

position:relative

出现了非常奇怪的bug。我正在尝试为一个网站制作一个基本的水平滚动图像库。我已经为移动版做了这项工作，但由于某些原因，桌面版无法工作

移动和桌面站点都使用以下结构：一个控制页面结构的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放置的：我已经检查了这两个div的

$gallery

是否成功放置在

$galleryContainer

中

    $galleryContainer =  $('<div/>', {
        class: 'galleryContainer',
    })
    .appendTo( '#mainContainer' );

    $gallery = $('<div/>', {
        class: 'gallery',
    })
    .appendTo( $galleryContainer );

$galleryContainer=$（“”{
类别：“厨房容器”，
})
.appendTo（“#主容器”）；
$gallery=$（''）{
班级：'画廊'，
})
.附件（$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>


$galleryContainer=$（''{
类别：“厨房容器”，
})
.appendTo（“#主容器”）；
$gallery=$（''）{
班级：'画廊'，
})
.附件（$galleryContainer）；
.集装箱{
显示：网格；
网格模板列：150px 150px最小值（300px，1fr）150px 150px；
网格模板行：80px最小值（300px，1fr）50px；
网格间距：2米2米；
高度：100vh；
保证金：0px！重要；
}
.厨房集装箱{
网格面积：2/1/3/6；
背景颜色：粉红色；
左侧填充：20px；
右边填充：20px；
}
.画廊{
身高：100%；
宽度：100%；
溢出-x：滚动；
位置：相对位置；
显示：内联块；
z指数：10；
背景颜色：浅蓝色；
}

我还检查了桌面站点上没有其他css覆盖div。附件是桌面问题的屏幕截图，其中

.galleryContainer

设置为

背景色：粉红色

，而

.gallery

设置为

背景色：蓝色

。我在控制台中没有收到任何错误消息，当我查看web检查器时，所有css属性都是预期的

这是手机的一张照片，展示我的目标

非常感谢！我真的被这一点难倒了，感谢任何帮助。

所有新网页都需要doctype，或DTD（文档类型定义），以告诉浏览器以哪种浏览器模式呈现页面。如果没有一个，它被认为是在一个像1999年一样再次和一个地方，你不想在使用将基于一个错误，从很久以前，将不会是当前的标准相同

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

请在您的问题中创建一个。您好，Turnip，谢谢您的帮助：我试图在JSFIDLE上重现此错误，但无法：，我还可以添加一个更小的错误。有趣的是，虽然这个错误发生在Chrome和Safari上，但是CSS在Firefox（包括普通版和开发者版）上的效果与预期一样。正如@Turnip在他的链接中所示，你需要在你的问题中给出一个例子，而不是任何第三方网站。你在用doctype吗？好的！对不起，我误解了。我复制了错误哦，没有，没有doctype（假设你的意思是或类似？）