1

Только в хроме наблюдается проблема с отображением кнопки - полоски вертикальные. Помогите их убрать.

проблемное место

https://jsfiddle.net/igramnet/tp23e6Lw/1/

Вот сам HTML.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1.0">
</head>
<body style="margin: 0; padding: 0; background: #f5f5f5;">
<div style="background: #f5f5f5;">
    <table cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; width:100%; background-color:#f5f5f5; background-image:url(https://my.gcdn.co/images/web_133/bg_body.png); background-position:0px 0px; background-repeat:repeat;">
        <tr>
            <td style="padding:60px 0px 35px; text-align:center; vertical-align:middle; font-family:Roboto, Tahoma;">
                <font style="font-size:20px; font-family:Roboto, Tahoma; color:#627288">
                    {% if lang == 'ru' %}
                        Добрый день, {{ user_name }}!
                    {% else %}
                        Hi, {{ user_name }},
                    {% endif %}
                </font>
            </td>
        </tr>
        <tr>
            <td>
                <table align="center" width="612" align="center" cellpadding="0" cellspacing="0" style="padding: 0; margin-left:auto; margin-right:auto; margin-bottom:0px; width:612px;">
                    <tr>
                        <td width="612" style="width:612px;">
                            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 0;padding: 0; width: 100%; box-shadow: 0 2px 4px #d8e1e5;border-radius: 4px; background:#fff;">
                                <tr>
                                    <td style="padding:40px 0px; text-align:center; background-color:#627288; border-top-left-radius: 4px; border-top-right-radius: 4px;">
                                        <table align="center" cellpadding="0" cellspacing="0" style="margin:0px ;padding:0px; width:100%;">
                                            <tr>
                                                <td style="padding:0px; background-color:#627288; color:#ffffff; text-align:center; line-height:1; font-size:20px; font-family:Roboto, Tahoma;">
                                                    <font style="font-size:14px; color:#ffffff; font-family:Roboto, Tahoma;"><img src="https://my.gcdn.co/images/web_234/icon_6.png" alt="{{TitleLetter}}"/></font>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:35px 40px 0px; background-color:#627288; color:#ffffff; text-align:left; font-size:20px; font-family:Roboto, Tahoma;">
                                                    <font style="color:#ffffff; font-size:20px; font-family:Roboto, Tahoma;">
                                                        {% if lang == 'ru' %}
                                                            Мы не смогли получить абонентскую плату за сервис. Поэтому он отключен. Для возобновления работы сервиса оплатите его в личном кабинете или свяжитесь с техподдержкой.
                                                        {% else %}
                                                            Service is stopped because we couldn’t process your payment. Please make a payment in your control panel to activate the service or contact our support team.
                                                        {% endif %}
                                                    </font>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr><td height="40" style="height:40px; font-size:0px;">&nbsp;</td></tr>
                                <tr>
                                    <td style="margin: 0;padding: 0px 40px;text-align: left; font-family:Roboto, Tahoma; font-size: 18px;font-weight: 400;color: #627288; line-height:1.3;">
                                        <table align="left" width="100%" cellpadding="0" cellspacing="0" style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">
                                            <tr>
                                                <td colspan="4" style="font-size:32px; color:#ff5252; font-family: Roboto, Tahoma; line-height:1; text-align:center; font-weight:500;">
                                                    <font style="font-size:32px; color:#ff5252; font-family: Roboto, Tahoma; font-weight:500;">{{ 'Платёж отклонён.' if lang == 'ru' else 'Payment cancelled.' }}</font>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="40" colspan="2" style="height:40px; font-size:0px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="10" colspan="2" style="height:10px; font-size:0px; border-top:1px solid #e6ebf1;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td width="50%" style="width:50%; text-align:left; font-size:14px; color:#627288; font-family: Roboto, Tahoma;">
                                                    <strong><font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ 'Квитанция' if lang == 'ru' else 'Invoice' }}</font></strong>
                                                </td>
                                                <td width="50%" style="width:50%; text-align:right; font-size:14px; color:#627288; font-family: Roboto, Tahoma;"><font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ payment_date }}</font></td>
                                            </tr>
                                            <tr>
                                                <td height="10" colspan="2" style="height:10px; font-size:0px; border-bottom:1px solid #e6ebf1;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="20" colspan="2" style="height:20px; font-size:0px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td width="50%" style="width:50%; text-align:left; font-size:14px; color:#627288; font-family: Roboto, Tahoma; line-height:20px;">
                                                    <strong><font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ user_name }}</font></strong><br/>
                                                    <font style="color: #627288; font-family: Roboto, Tahoma; text-decoration:none; font-size:14px;"><a style="text-decoration:none; color:#627288; font-family:Roboto, Tahoma; font-size:14px; cursor:text;" href="" target=""><font style="color: #627288; font-family: Roboto, Tahoma; text-decoration:none; font-size:14px;">{{ user_email }}</font></a></font><br/>
                                                    <font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ user_company }}</font>
                                                </td>
                                                <td width="50%" style="width:50%; text-align:right; font-size:14px; color:#627288; font-family: Roboto, Tahoma; line-height:20px;">
                                                    <strong><font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ GCORE_COMPANY }}</font></strong><br/>
                                                    <font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;"><a style="text-decoration:none; color:#627288; font-family:Roboto, Tahoma; font-size:14px; cursor:text;" href="" target=""><font style="color: #627288; font-family: Roboto, Tahoma; text-decoration:none; font-size:14px;">{{ GCORE_STREET }},</font></a></font><br/>
                                                    <font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;"><a style="text-decoration:none; color:#627288; font-family:Roboto, Tahoma; font-size:14px; cursor:text;" href="" target=""><font style="color: #627288; font-family: Roboto, Tahoma; text-decoration:none; font-size:14px;">{{ GCORE_COUNTRY }}</font></a></font>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="21" colspan="2" style="height:21px; font-size:0px; border-bottom:2px solid #e6ebf1;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="30" colspan="2" style="height:30px; font-size:0px;">&nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="margin: 0; padding:0px 40px;text-align: left; font-family: Roboto, Tahoma; font-size: 14px;font-weight: 400;color: #627288; line-height:1.3;">
                                        <table align="left" width="100%" cellpadding="0" cellspacing="0" style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">
                                            <tr>
                                                <td width="155" style="width:155px; text-align:left; font-size:14px; color:#9daabc; font-family: Roboto, Tahoma; line-height:1;">
                                                    <font style="font-size:14px; color:#9daabc; font-family: Roboto, Tahoma;">{{ 'Наименование' if lang == 'ru' else 'Item' }}</font>
                                                </td>
                                                <td width="85" style="width:85px; text-align:right; font-size:14px; color:#9daabc; font-family: Roboto, Tahoma; line-height:1;">
                                                    <font style="font-size:14px; color:#9daabc; font-family: Roboto, Tahoma;">{{ 'Сумма' if lang == 'ru' else 'Amount' }}</font>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="10" colspan="2" style="height:10px; font-size:0px; border-bottom:1px solid #e6ebf1;">&nbsp;</td>
                                            </tr>
                                            {% for item in invoice_items %}
                                            <tr>
                                                <td height="20" colspan="2" style="height:20px; font-size:0px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="text-align:left; font-size:14px; color:#627288; font-family: Roboto, Tahoma; line-height:1.3; vertical-align:middle;">
                                                    <font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ 'Оплата сервисов G&#8209;Core&nbsp;Labs' if lang == 'ru' else 'Payment for G&#8209;Core&nbsp;Labs services' }}</font>
                                                </td>
                                                <td width="" style="text-align:right; font-size:14px; color:#627288; font-family: Roboto, Tahoma; line-height:1.3; vertical-align:middle;">
                                                    <font style="font-size:14px; color:#627288; font-family: Roboto, Tahoma;">{{ item.amount }} {{ item.currency }}</font>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="10" colspan="2" style="height:10px; font-size:0px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="10" colspan="2" style="height:10px; font-size:0px; border-bottom:1px solid #e6ebf1;">&nbsp;</td>
                                            </tr>
                                            {% endfor %}
                                        </table>
                                    </td>
                                </tr>
                                <tr><td height="40" colspan="2" style="height:40px; font-size:0px;">&nbsp;</td></tr>
                                <tr>
                                    <td style="margin: 0;padding:0px; text-align:center;">
                                        <table cellpadding="0" cellspacing="0" align="center" height="47">
                                            <tr>
                                                <td background='https://my.gcdn.co/images/web_133/button_lf.png' height="47" width="23" style="background-color: #ff5700; background-image:url('https://my.gcdn.co/images/web_133/button_lf.png'); background-repeat:no-repeat; background-position:0px left; "></td>
                                                <td background='https://my.gcdn.co/images/web_133/button_rp.png' height="47" style="background-color:#ff5700; background-image:url('https://my.gcdn.co/images/web_133/button_rp.png'); background-repeat:repeat-x; background-position:0px 0px; padding:0px 5px; vertical-align:top; text-align:center; line-height:1; font-family:Roboto, Tahoma; font-size:18px;">
                                                    <table cellpadding="0" cellspacing="0" align="center" height="42">
                                                        <tr>
                                                            <td height="42" style="font-family:Roboto, Tahoma; font-size:18px;vertical-align:middle; text-align:center; line-height:1; ">
                                                                <font style="color:#ffffff; font-family:Roboto, Tahoma; font-size:18px; text-decoration:none;">
                                                                    <a href="{% if lang == 'ru' %}{{ login_account_ru }}{% else %}{{ login_account_eng }}{% endif %}" target="_blank" style="text-decoration:none;  background-color: #ff5700; color:white; font-family:Roboto, Tahoma; font-size:18px;"><font style="text-decoration:none; color:#ffffff; font-family:Roboto, Tahoma; font-size:18px;">{{ 'Включить сервис' if lang == 'ru' else 'Activate the service' }}</font></a>
                                                                </font>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td background='https://my.gcdn.co/images/web_133/button_rg.png' height="47" width="23" style="background-color: #ff5700; background-image:url('https://my.gcdn.co/images/web_133/button_rg.png'); background-repeat:no-repeat; background-position:0px right; "></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr><td height="40" style="height:40px; font-size:0px;">&nbsp;</td></tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="60" style="height:60px;">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

Проблему я наблюдаю тогда, когда есть скрол в браузере (или можно масштабом добиться)

2
  • Вопрос непонятен
    – Kyper
    1 ноя 2018 в 13:08
  • Вопрос в том, как исправить косяк, который виден только в хроме? Добавил фото косяка в сообщение
    – igramnet
    1 ноя 2018 в 14:04

1 ответ 1

0

Так происходит потому что у вас неправильные размеры ячеек таблицы относительно фона который в них используется. Вам нужно проверить высоту и ширину во всех ячейках со строки 130 по 150, проверить в хроме и остальных браузерах.

Здесь например играет 1 пиксель фона ячейки который используется поэтому появляется полоса справа:

<td background='https://my.gcdn.co/images/web_133/button_rg.png' height="47" width="23" style="background-color: #ff5700;>

Можно попробовать уменьшить ширину:

<td background='https://my.gcdn.co/images/web_133/button_rg.png' height="47" width="22" style="background-color: #ff5700;>

Тоже самое с высотой:

<td background='https://my.gcdn.co/images/web_133/button_rg.png' height="20" width="22" style="background-color: #ff5700;>

Вот слегка улучшенный пример для сравнения: https://jsfiddle.net/ob13gvfw/

Если не получится, то переверстайте кнопку по человечески с помощью border-radius вместо фоновых изображений. Таблица совместимости с почтовыми клиентами. Мануал по изготовлению подобных кнопок для email.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.