在JSfiddle中的溢出属性,但不在铬/ Safari浏览器
问题描述:
我正在为div-box的水平溢出属性挣扎。该代码不适用于Safari浏览器& Chrome,但在JSfiddle中输入时无效...在JSfiddle中的溢出属性,但不在铬/ Safari浏览器
我在做什么错?
提前致谢!
#box {
overflow: hidden;
}
#box1 {
width: 400px;
height: 400px;
background: pink;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
white-space: nowrap;
}
#box2 {
width: 180px;
height: 380px;
margin: 10px;
background: black;
display: inline-block;
}
<div id="box">
\t <div id="box1">
\t \t <div id="box2"></div>
\t \t <div id="box2"></div>
\t \t <div id="box2"></div>
\t \t <div id="box2"></div>
\t </div>
</div>
答
我真的不得到您的问题,我得到同样的结果在Chrome,火狐,IE和边缘。
首先
#box {
overflow: hidden;
}
,如果你想隐藏方块这是行不通的。改为在#box1上应用此样式,并删除现有的溢出样式。
#box1 {
overflow: hidden;
}
二
你有两个因素溢出属性:
#box {
overflow: hidden;
}
和
#box1 {
overflow-x: scroll;
overflow-y: hidden;
}
也许这是造成问题,删除一个溢出的风格,并保持另一种溢出风格。
+0
我删除了#box溢出风格,但该框仍然不会滚动水平...奇怪的是,代码在Chrome上适合您等。 –
+0
也许删除您的浏览器缓存? (Chrome:[CTRL] + [SHIFT] + R) –
你想用这段代码实现什么? –
我想将它用于我的音乐网站。黑盒子(#box2)将充满艺术品和曲目细节。 –