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

Question

最近我将Chrome更新为v48，我遇到了一个奇怪的错误。所以我有一个非常简单的标记，带有#app/models/game.rb class Game < ActiveRecord::Base #schema id | name | created_at | updated_at has_many :players end #app/models/player.rb class Player < ActiveRecord::Base belongs_to :game end 标签和一些基本样式

<pre>

现在的问题是，如果我将pre { border: 1px solid #dedede; overflow: auto; width: 90%; margin: auto; margin-top: 20px; border-radius: 3px; background-color: #f7f7f7; } 用于border-radius代码，则Chrome会强制显示水平滚动条。如果我删除了pre属性，水平条将消失，并会在预期时重新显示。

Demo

Demo 2 （正确的行为，但仅当我删除border-radius [对于mac用户]时）

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

  

其他详细信息：
  Mac Pro Retina
  OS：OSX Yosemite ^v10.10.5
  Chrome版本：48.0.2564.97 ^（64位）

因此，问题是，如果我使用border-radius，为什么Chrome强制滚动条？如果用户开始滚动，我怎样才能将旧功能恢复到用于显示滚动条的位置。如果我展开它们，这也会让我对预标签的下拉菜单混乱，滚动条也会重叠这些菜单，但这只是在这个问题的上下文之外。

Answer 1

使用<pre>标记本身应用css属性“white-space：pre”。除非使用物理中断，否则这将保留空白。您应该使用其他标记或对标记应用“white-space：normal”。