css - 如果 border-radius [OSX]，Chrome 48 添加滚动条

Question

最近我将我的 Chrome 更新到 v48，我遇到了一个奇怪的错误。所以我有一个非常简单的标记 <pre>带有一些基本样式的标签

pre {
  border: 1px solid #dedede;
  overflow: auto;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  border-radius: 3px;
  background-color: #f7f7f7;
}

现在的问题是，如果我使用 border-radius对于 pre标记，Chrome 强制显示水平滚动条。如果我删除 border-radius属性，水平条将消失并按预期重新出现在滚动条上。

Demo

Demo 2 (正确的行为，但前提是我删除了 border-radius [for mac users])

只是为了澄清我在 Mac OSX Yosemite 上，所以滚动条在您开始滚动之前不会显示(不确定 Windows 是否做同样的事情，我确定它不会)。

Additional details:
Mac Pro Retina
OS: OSX Yosemite ^v10.10.5
Chrome Ver: 48.0.2564.97 ^(64-bit)

因此，问题是，如果我使用 border-radius，为什么 Chrome 会强制滚动条？以及只有当用户开始滚动时，我怎样才能将旧功能恢复到过去显示滚动条的位置。这也会弄乱我在 pre 标签上的下拉菜单，如果我展开它们，滚动条也会与这些菜单重叠，但这与这个问题无关。

Answer 1

使用 <pre>标记 native 应用 css 属性“white-space: pre”。除非使用物理中断，否则这会保留空白。您应该使用不同的标签或将“white-space: normal”应用于您的标签。