Почему мой img оставляет незаполненное пространство в 1 пиксель в ячейке таблицы?

Я пишу некоторый html для отправки по электронной почте для программной отправки внутренним пользователям. Все они используют Outlook 2016. (Написание кода для Outlook ужасно, так как простые вещи, такие как фон CSS, не работают. Поэтому я застрял с кодированием html, как будто сейчас 90-е.)

Содержимое представляет собой своего рода блок-схему, и оно должно быть видно в почтовом клиенте, поскольку пользователи не будут щелкать ссылку, чтобы перейти на внешнюю страницу. Поскольку это Outlook, я делаю все с таблицами. По сути, все графическое — это ячейка таблицы, но мне нужно добавить стрелки. я сделал это, покрасив фон ячейки и «закрыв его» белым на прозрачном вырезе со стрелкой.введите описание изображения здесь

Я в значительной степени там, за исключением действительно раздражающей ошибки, когда на некоторых, но не на всех стрелках есть линия в 1 пиксель слева от стрелки. (Те, что на картинке с красными стрелками, указывающими на них.)

Мое изображение стрелки имеет ту же ширину, что и ширина моего столбца, умноженная на 2, а код выглядит следующим образом, чтобы создать строку с двумя наконечниками стрелок (я использую 36 столбцов, так как дизайн основан на сетке из 12 столбцов, но тогда мне нужно чтобы иметь возможность разбивать ячейки дальше, чтобы сделать стрелки):

<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>

И соответствующий CSS показан здесь:

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

Как избавиться от неудобной строки слева?

Ответы (1)

Это действительно скорее предположение без всего кода...

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

Для всех ячеек есть правая граница и синий фон.

td.blank {
    background-color: white;
}

По-прежнему имеет правую границу по умолчанию, но фон теперь белый.

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

По-прежнему имеет правую границу по умолчанию и синий фон, но теперь есть и левая граница, изменяющая ширину этих ячеек.

Таким образом, ваши ячейки таблицы не имеют одинаковой ширины. Вы можете добавить левую границу ко всем ячейкам, чтобы все ячейки имели как левую, так и правую границу, а затем просто изменить цвета. Вы можете использовать box-sizing, но я сомневаюсь, что это поддерживается в Outlook.

Я бы также предложил указать все атрибуты для Outlook. Браузеры научились приспосабливаться к отсутствию кавычек, но они создавали проблемы до того, как браузеры их догнали. Я не удивлюсь, если отсутствие кавычек вызовет проблемы в Outlook.

Вы также можете рассмотреть возможность добавления border="none"изображений.

Почему мой img оставляет незаполненное пространство в 1 пиксель в ячейке таблицы?
СпросиСетьПолитика конфиденциальности1y, 0v