删除传单缩放控件轮廓（？）

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 class 定义（参见 Leaflet CSS line 209）。

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

对于触摸（移动）设备，此定义被 .leaflet-touch .leaflet-bar class 覆盖（参见 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/

删除传单缩放控件轮廓（？）

Remove leaflet zoom control outline(?)

css

mobile-devices

leaflet