Html 带溢出滚动条的固定位置Div在Safari中不可见_Html_Css_Safari_Css Position

Html 带溢出滚动条的固定位置Div在Safari中不可见

html css safari

Html 带溢出滚动条的固定位置Div在Safari中不可见,html,css,safari,css-position,Html,Css,Safari,Css Position,我试图用一个库（Quill-JS富文本编辑器）来做一些自定义布局的工作，但我遇到了一个讨厌的Safari bug 如果您在Chrome/Edge/Firefox中查看这个JSFiddle，您将看到有两个面板可以水平滚动：但是如果你在Safari中看到它，上面的面板是看不见的。我已经读到这是Safari中的一个bug，但我希望有一个解决方法。我不能更改标记，但我可以更改CSS 关于如何使顶部面板在Safari中可见，有什么想法吗如果您想尝试将其加载到浏览器中的文件中，以下是完整代码。如果要使其

我试图用一个库（Quill-JS富文本编辑器）来做一些自定义布局的工作，但我遇到了一个讨厌的Safari bug

如果您在Chrome/Edge/Firefox中查看这个JSFiddle，您将看到有两个面板可以水平滚动：

但是如果你在Safari中看到它，上面的面板是看不见的。我已经读到这是Safari中的一个bug，但我希望有一个解决方法。我不能更改标记，但我可以更改CSS

关于如何使顶部面板在Safari中可见，有什么想法吗

如果您想尝试将其加载到浏览器中的文件中，以下是完整代码。如果要使其滚动，则必须添加更多的

和

标记

<html>
<head>
<style type="text/css">
.toolbar{
  background-color: #DDD;
  height: 50px;
  position: fixed;
  left: 0;
  right:0;
  bottom:0;
  overflow-x:scroll;
  white-space:nowrap;
}
.panel{
  background-color: #444;
  height: 50px;
  position: fixed;
  bottom:50px;
  left: 0px;
  right:0px;
  white-space:nowrap;
  overflow-x:scroll;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#333;
  margin:5px 10px;
}
b{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#999;
  margin:5px 10px;
}
</style>

<body>
  <div class="toolbar">
    <span></span>
    <span></span>
    <span>
      <div class="panel">
        <b></b>
        <b></b>
        <b></b>
      </div>
    </span>
    <span></span>
    <span></span>
  </div>
</body>
</html>


.工具栏{
背景色：#DDD；
高度：50px；
位置：固定；
左：0；
右：0；
底部：0；
溢出-x：滚动；
空白：nowrap；
}
.小组{
背景色：#444；
高度：50px；
位置：固定；
底部：50px；
左：0px；
右：0px；
空白：nowrap；
溢出-x：滚动；
}
跨度{
显示：内联块；
宽度：40px；
高度：40px；
边界半径：20px；
背景：#333；
利润率：5x10px；
}
b{
显示：内联块；
宽度：40px；
高度：40px；
边界半径：20px；
背景：#999；
利润率：5x10px；
}

提前谢谢

不确定是否正确，因为我添加了额外的div。。。但它可能给了你一个暗示。它在Safari中对我有用

我认为添加一个额外的div是修复它的唯一方法。我能够做到这一点，现在它的工作预期。谢谢你的帮助！

<div class="conteiner">
<div class="toolbar">
    <span></span>
    <span></span>
    <span></span>
    <span>
      <div class="panel">
        <b></b>
        <b></b>
        <b></b>
      </div>
    </span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  </div>

.conteiner{
  position:fixed;
  bottom: 0;
  height:100px;
}
.toolbar{
  background-color: #DDD;
  height: 100px;
  position: relative;
  bottom:0px;
  left: 0;
  right:0;
  overflow-x:scroll;
  white-space:nowrap;
}

.panel{
  background-color: #444;
  height: 50px;
  position: absolute;
  bottom:0px;
  left: 0px;
  right:0px;
  overflow-x:scroll;
  white-space:nowrap;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#333;
  margin:5px 10px;
}
b{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#999;
  margin:5px 10px;
}