Блог

Главная - Вопросы по программированию - Строка границы не отображается в Outlook / Gmail

Строка границы не отображается в Outlook / Gmail

#html #css

#HTML #css

Вопрос:

Я создаю HTML-подпись, и кажется, что моя строка границы не отображается в моем почтовом клиенте (outlook / Gmail), когда она появляется в веб-версии.

Код в стиле css находится здесь:

 .border {
        border-right: solid 1px #8E8E8E;
        padding-right: 15px;
        padding-left: 15px;
        max-width: 560px;
    }
    </style>
<body>
    <table>
    <tr>
    <td class="border"><a href="http://busways.com.sg/"><img src="http://busways.com.sg/wp-content/uploads/2019/12/Busways-Official-Logo.png" title="Busways Official Website" alt="Busways Logo" width="150"></a></td>
    <td class="Content"><font class="name">Benjamin</font><br>
        <font class="designation">Executive</font><br>
        <span class="details"><b>TEL:</b> 6123456</span>  <span class="details"><b>FAX:</b> 64567243</span>  <span class="details"><b>EMAIL:</b> admin@</span><br>
        <span class="details"><b>WEB:</b> website</span>  <span class="details"><b>ADD:</b> address</span>
        </td>
     </tr>
        
    </table>
    
</body>
</html>

Есть ли способ отобразить линию границы в Outlook и на сервере gmAIL?

Ответ №1:

Используйте встроенный стиль для подписей. Я удалил класс border , внешний css и просто добавил встроенный стиль:

 <body>
    <table>
    <tr>
    <td style="border-right: solid 1px #8e8e8e; padding-right: 15px; padding-left: 15px; max-width: 560px"><a href="http://busways.com.sg/"><img src="http://busways.com.sg/wp-content/uploads/2019/12/Busways-Official-Logo.png" title="Busways Official Website" alt="Busways Logo" width="150"></a></td>
    <td class="Content"><font class="name">Benjamin</font><br>
        <font class="designation">Executive</font><br>
        <span class="details"><b>TEL:</b> 6123456</span>  <span class="details"><b>FAX:</b> 64567243</span>  <span class="details"><b>EMAIL:</b> admin@</span><br>
        <span class="details"><b>WEB:</b> website</span>  <span class="details"><b>ADD:</b> address</span>
        </td>
     </tr>
        
    </table>
    
</body>

Комментарии:

1. Спасибо за помощь! Могу ли я также проверить, есть ли способ сделать эту подпись электронной почты адаптивной для мобильных устройств? Таким образом, на меньшем экране она будет располагаться сверху и снизу вместо текущего расположения рядом друг с другом.