在JSfiddle中的溢出属性，但不在铬/ Safari浏览器

Question

我正在为div-box的水平溢出属性挣扎。该代码不适用于Safari浏览器& Chrome，但在JSfiddle中输入时无效...

我在做什么错？

提前致谢！

#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>

Answer 1

我真的不得到您的问题，我得到同样的结果在Chrome，火狐，IE和边缘。

首先

#box { 
    overflow: hidden; 
} 

，如果你想隐藏方块这是行不通的。改为在＃box1上应用此样式，并删除现有的溢出样式。

#box1 { 
    overflow: hidden; 
} 

二

你有两个因素溢出属性：

#box { 
    overflow: hidden; 
} 

和

#box1 { 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

也许这是造成问题，删除一个溢出的风格，并保持另一种溢出风格。