html - 仅在 chrome 中的按钮周围出现奇怪的蓝色

Question

附件是屏幕截图，由于某种原因，单击按钮时会出现蓝色部分。

这是我用于此按钮的代码：

html:

<div style="display:table-cell;" class="btnRight">
    <span class="scrollUp" onclick="mobile_scrollUp();"></span>
    <div style="clear:both"></div> 
    <span class="scrollDown" onclick="mobile_scrollDown();"></span>
</div>

CSS：

.btnRight .scrollUp {
   width: 35px;
   height: 35px;
   background: url(../images/up-down-arrows.png) 0px 0px no-repeat;
}

.btnRight .scrollUp {
   width: 35px;
   height: 35px;
   background: url(../images/up-down-arrows.png) 0px 0px no-repeat;
}

.previews-status span {
   margin: 7px 0 0 0;
   display: inline-block;
   cursor: pointer;
}

Answer 1

输入{大纲：无；如果您使用 < input type="button" > 对我有用

Answer 2

您在使用 Internet Explorer 吗？IE出于某些愚蠢的原因在事物周围添加了蓝色边框。要摆脱它，请将其添加到您的 CSS 中：

body {
    border: 0;
}

Answer 3

与@safinn 回答类似，当使用 chrome 时，有时按钮会出现奇怪的轮廓。

这消除了它：

area {
    outline : none;
}