CSS clear:both funktioniert nicht für Zellen mit Hintergrundbild in einer Tabelle?

Question

Ich entwickle eine E-Mail und möchte, dass ein Bild nur auf einem mobilen Gerät angezeigt wird.... Deshalb habe ich eine leere mit einem span darin erstellt und den span so gestylt, dass er ein Hintergrundbild hat.

Das Problem ist, ich möchte, dass das Bild eine ganze Zeile einnimmt, anstatt direkt neben der Überschrift zu sein. Ich habe clear:both und display:block ausprobiert, aber ich bin mir nicht sicher, warum es nicht funktioniert. Ich habe auch versucht, die Breite auf 100% zu setzen, aber das wirft alles durcheinander... irgendwelche Vorschläge?

http://jsfiddle.net/pEDSn/

.test {
    width: 41px;
    height: 41px;
    background-image: url('http://placehold.it/41x41');
    background-repeat: no-repeat;
    background-size: 41px 41px;
    display: block;
    clear: both !important;
}

Answer 1

Aufgrund der Anordnung von 3 in Ihrer einzelnen Zeile wird das Tabellenlayout über den und CSS erzwungen.

Ich würde vorschlagen, Ihr h1 in eine separate Zeile zu verschieben.

Answer 2

Ich habe eine leere Zeile mit der Klasse "test" hinzugefügt und es hat funktioniert... Überprüfen Sie es selbst:

http://jsfiddle.net/pEDSn/2/

    Ficaborio vellandebis arum inus es ema gimus, quibus vent.

Answer 3

Die Verwendung eines background-image in dieser Technik wird von den meisten E-Mail-Clients nicht unterstützt. Sie sollten den Tag für alle Clients inline schreiben, die CSS im style-Tag nicht unterstützen. Außerdem funktioniert background-image nicht in Outlook, es sei denn, es befindet sich im Tag .

Wenn Sie möchten, dass das Bild nur auf Mobilgeräten angezeigt wird, ist es besser, ein normales Bild-Tag zu verwenden und es mit display:none; zu verstecken. Dann überschreiben Sie es in einem Media-Query mit display:block;. Dies funktioniert immer noch nicht für Clients, die nur Inline-Elemente unterstützen, wie z. B. Gmail, aber es ist der bessere Weg, um es zu tun.