删除传单变焦控制轮廓（？）

Question

在我尝试的每个移动设备上的每个浏览器中，我的缩放控制按钮都有一个浅灰色轮廓，不会显示在桌面浏览器上。我已经尝试了很多css来摆脱它，但没有任何作用。有谁知道如何删除它？

这是我的控件CSS，它可以在桌面浏览器上完成我需要的一切，但不会在移动设备上删除这些大纲：

.leaflet-control-container {
    box-shadow: none !important;
    outline: 0 !important;
}

.leaflet-bar {
    box-shadow: none;
}

.leaflet-bar a, .leaflet-bar a:hover {
    background-color: #f0b034;
    border: 1px solid #065428;
}

.leaflet-bar a:first-child, .leaflet-bar a:last-child {
    border-radius: 0;
    border-bottom: 1px solid #065428;
}

这是我目前用于测试的实时页面：click

Answer 1

在桌面浏览器中， 是缩放控件周围的阴影。它由.leaflet-bar类定义（请参阅Leaflet CSS line 209）。

.leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

对于触控（移动）设备，此定义会被.leaflet-touch .leaflet-bar类覆盖（请参阅line 380）。

.leaflet-touch .leaflet-bar {
    box-shadow: none;
}

.leaflet-touch .leaflet-bar {
    border: 2px solid rgba(0,0,0,0.2);
}

您应该可以通过覆盖CSS中的border属性来删除它。

.leaflet-touch .leaflet-bar {
    border: none;
}

演示：http://jsfiddle.net/ve2huzxw/37/