jScrollPane div上的蓝色边框答案

【问题标题】：Blue border on jScrollPane divjScrollPane div上的蓝色边框
【发布时间】：2010-11-22 11:23:56
【问题描述】：

实例：http://www.legodata.com/kc/kc.html

我遇到了 jScrollPane 的边框显示问题，您知道要使用哪个 css 规则来删除此边框吗？

在其中单击时，它会在 jScrollPane div 周围显示一个蓝色边框，当单击 jScrollPane div 外部时（有时）会消失。

看起来像这样：

这是当前的 CSS：

background-color: transparent;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
bottom: auto;
color: #999E92;
display: block;
float: right;
font-family: VerdanaArial, Helvetica, sans-serif;
font-size: 16px;
height: 802px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
right: auto;
top: auto;
visibility: visible;
width: 200px;
z-index: 1;

我可以在 Chromium 和 Safari 中重现此问题（未在其他地方测试）。

【问题讨论】：

不可能从你给出的css中回答你。我的例子会帮助更多
现场示例：legodata.com/kc/kc.html

标签： jquery css webkit jscrollpane

【解决方案1】：

初始化jScrollPane时，使用参数：

hideFocus: true

例如：

$('.scroll-pane').jScrollPane(
{
   autoReinitialise: true,
   hideFocus: true
});

【讨论】：

【解决方案2】：

尝试将 outline: none; 添加到您的 CSS 中

【讨论】：

这对我有用 $(element).jScrollPane({ hideFocus:true });

【解决方案3】：

outline: none; 可以使用，但请注意，这是 Chrome、FF 和 Safari 中的默认浏览器行为，会使视力不佳的人难以浏览您的网站。确保仅将其添加到页面上的不可导航元素。

按

选项+制表符

查看显示给屏幕阅读器等的网站导航结构。这还将显示大纲在其他元素上的显示位置！ :)

【讨论】：

【解决方案4】：

您所要做的就是在您的 CSS 中添加以下行。

.jScrollPaneContainer{
    outline: 0 none;
}

【讨论】：