如何检测（并纠正？）跨浏览器的各种滚动条可见性？

Question

基本上，我需要在textarea 和div（使用white-space: pre-wrap）中同时显示（或假的）滚动条，以便处理空格相同），当它们的内容相同时。

在 Webkit 中，这很简单：

textarea.foo, div.foo {
  overflow: auto; /* show scrollbars exactly when needed */
  /* also match padding, height, width, font, line-height, etc. */
}

但是当内容不够长而需要滚动时，其他一些浏览器（我认为是 OS X 上的 Firefox 和 IE7）实际上只会在 textarea 而不是 div 上显示滚动条（反之亦然）。

为了清楚起见，我并不要求滚动条在所有浏览器中都显示相同。我需要在所有主要浏览器中都做到这一点：在同一浏览器中，只要给定相同的内容，div 和 textarea 就会准确地显示滚动条。如果这是有时、总是或（在 Safari/OS X Lion 上）永远不会无关紧要。

Answer 1

将滚动条配置为一直显示

textarea.foo, div.foo {
  overflow-y: scroll; /* Show vertical scroll bars at all time 

}