In IE7 und IE8 sieht man bis hin zu Vergrößern und Verkleinern gar kein Bild von Controlls mehr, in anderen Browsern sind von den Controll-Symbolen nur „vergrößern“ und „verkleinern“ zu sehen. „Schuld“ daran ist eine globale CSS-Anweisung in TwentyTwelve-Theme zugunsten von „Responsive Images“ im Content für alle Bilder, in folgender Anweisung.
/* Responsive images */
.entry-content img, /* verursacht Verschwinden */
.comment-content img,
.widget img {
max-width: 100%;
}
Da ich die TwentyTwelve Stile in mein Childtheme übernahm, wirkte sich das dort ebenso auf die Googlemap-Darstellung aus. Bei der Verwendung eines Childthemes ist die Behebung kein Problem. Wenn die Änderung hingegen direkt in den TwentyTwelve Stilen vorgenommen wird, geht sie mit dem nächsten Theme-Update verloren. Wer TwentyTwelve mit Goolgemaps und keine Inlinestile verwenden möchte, kommt deswegen womöglich nicht um die Entscheidung für ein Childtheme herum.
Die Behebung des Problems
.entry-content #map_canvas img { /* #map_canvas ggf. durch Klasse oder ID des Divs ersetzen in dem die Maß eingebunden ist */
max-width:none;
}
Damit wird der Stil nur innerhalb der Googlemap überschrieben und das responsive Verhalten von Bildern im Content nicht beeinträchtigt. Die Maßnahme behebt auch eine etwaige Verzerrung des Markers im IE8 (durch IE8 max-width Bug).
Schreibe einen Kommentar