gpt4 book ai didi

html - 溢出 :hidden in Chrome doesn't work

转载 作者:行者123 更新时间:2023-11-28 16:39:57 25 4
gpt4 key购买 nike

我已经阅读了有关如何解决此问题的所有建议,但无论我做什么,我的网站仍然允许用户水平滚动。我已经隐藏了水平滚动条,但使用箭头键或鼠标滚轮仍然可以让用户滚动。我试图在单个元素和 html 上分配 overflow:hidden。似乎没有任何效果。

HTML:

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<div id="shapes">
<div id="design-shape"></div>
<div id="contact-shape"></div>

</div>
</body>

CSS:

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
position: relative;
vertical-align: baseline;
overflow-x: hidden;
}

#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 1040px;
top: 1200px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 6;
}

#contact-shape {
background: none repeat scroll 0 0 #333333;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 800px;
top: 1960px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 17;
}

最佳答案

发生了什么

在 Chrome 中,您可以横向滚动,这样可以显示您不想显示的内容。这是尽管没有水平滚动条。

原因是延伸到侧面的形状是绝对定位的,而它们的父 #shapes 不是相对或绝对定位的,所以它无法捕获它们。要解决此问题,我们需要绝对定位 #shapes,并将 position:relative 设置为 #shapes 的父级 #page 添加一些繁琐的位以确保一切都正确定位,我们就可以开始了。

代码

CSS:

#page {
position:relative;
}

#shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

关于html - 溢出 :hidden in Chrome doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22698483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com