Entfernen Sie die Broschüre Zoom-Übersicht (?) - CSS, Broschüre, Mobilgeräte

In jedem Browser auf jedem Mobilgerät habe ichIch habe versucht, meine Zoom-Steuerungsschaltflächen haben eine hellgraue Umrandung, die auf Desktop-Browsern nicht angezeigt wird. Ich habe eine Menge CSS versucht, um sie zu entfernen, aber nichts funktioniert. Kann jemand es entfernen?

Dies ist mein CSS für die Steuerelemente, das zwar alles, was ich für Desktop-Browser benötige, aber diese Umrisse auf mobilen Geräten nicht entfernt:

.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;
}

Dies ist die Live-Seite, die ich derzeit zum Testen verwende: klicken

Antworten:

Im Desktop-Browser dort ist ein Schatten um die Zoomsteuerung. Es ist definiert durch .leaflet-bar Klasse (siehe Flyer CSS-Zeile 209).

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

Bei Touch-Geräten (Mobilgeräten) wird diese Definition durch überschrieben .leaflet-touch .leaflet-bar Klasse (siehe Zeile 380).

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

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

Sie sollten es durch Überschreiben entfernen können border Eigenschaft in Ihrem CSS.

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

Demo: http://jsfiddle.net/ve2huzxw/37/