Как скрыть background кнопки
262
24 марта 2019, 07:30
Только в хроме наблюдается проблема с отображением кнопки - полоски вертикальные. Помогите их убрать.
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;"> </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;"> </td>
</tr>
<tr>
<td height="10" colspan="2" style="height:10px; font-size:0px; border-top:1px solid #e6ebf1;"> </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;"> </td>
</tr>
<tr>
<td height="20" colspan="2" style="height:20px; font-size:0px;"> </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;"> </td>
</tr>
<tr>
<td height="30" colspan="2" style="height:30px; font-size:0px;"> </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;"> </td>
</tr>
{% for item in invoice_items %}
<tr>
<td height="20" colspan="2" style="height:20px; font-size:0px;"> </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‑Core Labs' if lang == 'ru' else 'Payment for G‑Core 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;"> </td>
</tr>
<tr>
<td height="10" colspan="2" style="height:10px; font-size:0px; border-bottom:1px solid #e6ebf1;"> </td>
</tr>
{% endfor %}
</table>
</td>
</tr>
<tr><td height="40" colspan="2" style="height:40px; font-size:0px;"> </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;"> </td></tr>
</table>
</td>
</tr>
<tr>
<td height="60" style="height:60px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Проблему я наблюдаю тогда, когда есть скрол в браузере (или можно масштабом добиться)
Answer 1
Так происходит потому что у вас неправильные размеры ячеек таблицы относительно фона который в них используется. Вам нужно проверить высоту и ширину во всех ячейках со строки 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.
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47550 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30491 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23623 visits
- Как через css изменить цвет png изображения? 10346 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 17.11.2024 | 21:48