项目中用到了 iframe，由于显示效果，想要修改一下滚动条样式，通过修改 css 样式在 chrome 下无效，而在 safari 中显示正常，不知道什么原因，求大佬们指点
写了个测试代码：
index.html：
Document
* {
margin: 0;
padding: 0;
}
/*- scrollbar -*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb{
background-color: #999;
-webkit-border-radius: 5px;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color: #666;
}
::-webkit-scrollbar-thumb:vertical:active{
background-color: #333;
}
::-webkit-scrollbar-button{
display: none;
}
::-webkit-scrollbar-track{
background-color: #f1f1f1;
}
/*- scrollbar -*/
body, html, #iframe {
width: 640px;
height: 100%;
margin: 0 auto;
}
inner.html：
innerHtml
* {
margin: 0;
padding: 0;
}
.innerDiv {
width: 100%;
height: 2000px;
background-color: #ccc;
}
附上效果截图：
Chrome：
Safari：
chrome 下 iframe 滚动条样式与 body 滚动条样式不同，而 safari 下 iframe 滚动条样式和 body 滚动条样式皆正常。求大佬们指点
