Warum hinterlässt mein Bild in einer Tabellenzelle einen 1 Pixel großen freien Platz?

Ich schreibe etwas HTML, das in eine Mail geschrieben wird, die programmatisch an interne Benutzer gesendet wird. Sie alle verwenden Outlook 2016. (Die Codierung für Outlook ist schrecklich, da einfache Dinge wie CSS-Hintergründe nicht funktionieren. Daher stecke ich mit der Codierung von HTML fest, als wäre es die 90er Jahre.)

Der Inhalt ist eine Art Flussdiagramm und muss im E-Mail-Client sichtbar sein, da die Benutzer nicht auf einen Link klicken müssen, um zu einer externen Seite zu gelangen. Da es sich um Outlook handelt, mache ich alles mit Tabellen. Grundsätzlich ist alles Grafische eine Tabellenzelle, aber ich muss Pfeilspitzen hinzufügen. Ich habe dies getan, indem ich den Hintergrund der Zelle eingefärbt und mit einem weißen auf transparenten Pfeilspitzenausschnitt "abgedeckt" habe.Geben Sie hier die Bildbeschreibung ein

Ich bin ziemlich genau dort, abgesehen von einem wirklich ärgerlichen Fehler, bei dem auf einigen, aber nicht allen Pfeilen eine 1-Pixel-Linie links von der Pfeilspitze ist. (Die auf dem Bild mit den roten Pfeilen, die auf sie zeigen.)

Mein Pfeilspitzenbild hat die gleiche Breite wie 2 x meine Spaltenbreite, und der Code lautet wie folgt, um eine Zeile mit 2 Pfeilspitzen zu erstellen (ich verwende 36 Spalten, da das Design auf einem 12-Spalten-Raster basiert, aber dann brauche ich um Zellen weiter unterteilen zu können, um die Pfeile zu machen):

<tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>Y</td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>N</td><td class='blank' colspan=8></td>
</tr>
<tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
</tr>

Und das relevante CSS wird hier angezeigt:

td {
    background-color: #82d0f5;
    height: 48px;
    border-right: 6px solid white;
    padding: 6px;
    word-break: break-all;
}
td.blank {
    background-color: white;
    padding:0;
    height: 24px;
}       
td.shaft {
    background-color: #82d0f5;
    padding: 0px;
    vertical-align:bottom;
    height: 24px;
    border-left: 1px solid white;
}
img {
    width:100%;
    display:block;
}

Wie werde ich die lästige Linie auf der linken Seite los?

Antworten (1)

Das ist wirklich eher eine Vermutung ohne den gesamten Code ...

td {
    background-color: #82d0f5;
    border-right: 6px solid white;
}

Es gibt einen rechten Rand und einen blauen Hintergrund für alle Zellen.

td.blank {
    background-color: white;
}

Hat immer noch den standardmäßigen rechten Rand, aber der Hintergrund ist jetzt weiß.

td.shaft {
    background-color: #82d0f5;
    border-left: 1px solid white;
}

Hat immer noch den standardmäßigen rechten Rand und blauen Hintergrund, aber jetzt gibt es auch einen linken Rand, der die Breite dieser Zellen ändert.

Ihre Tabellenzellen sind also nicht gleich breit. Sie könnten allen Zellen einen linken Rand hinzufügen, sodass alle Zellen sowohl einen linken als auch einen rechten Rand haben, und Sie ändern dann lediglich die Farben. Sie könnten verwenden, box-sizingaber ich bezweifle, dass dies in Outlook unterstützt wird.

Ich würde auch vorschlagen, alle Attribute für Outlook zu zitieren. Das Fehlen von Anführungszeichen war etwas, woran sich Browser gewöhnen mussten, aber sie verursachten Probleme, bevor Browser aufholten. Ich wäre nicht überrascht, wenn das Fehlen von Anführungszeichen Probleme in Outlook verursacht.

Sie können auch erwägen, border="none"die Bilder zu ergänzen.

Warum hinterlässt mein Bild in einer Tabellenzelle einen 1 Pixel großen freien Platz?
AntwortenHierDatenschutz-Bestimmungen1y, 0v