Ошибка границы таблицы IE - ОК в Chrome и Safari - PullRequest
0 голосов
/ 21 ноября 2018

каждый,

Я разработал быстрый HTML-документ, который будет включен в Outlook (следовательно, необходимо иметь встроенные стили внутри HTML).В Chrome и Safari все выглядит отлично, но IE11 показывает следующую проблему.Граница таблицы испорчена, как будто в ней два цвета, а не один, как в хорошей версии Chrome.Кроме того, Firefox, кажется, игнорирует набор таблиц для цвета и показывает скошенную его версию ... У кого-нибудь есть идеи по этому поводу?Я вставляю пример изображения и мой код ниже.

изображение, изображающее ошибку в IE по сравнению с хорошей версией в Chrome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Xmas Card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body style="margin: 0; padding: 60px 300px 60px 300px; background-color:#d2d2d1">
<table>
	<tr>
	<div style="text-align:center; margin-bottom:20px">
		<span style="font-family:sans-serif; font-size:10pt"><a href="#">If you have problems opening this message, read online here</a></span>
		</div>
	</tr>
</table>
 <table border="8" rules="none" bordercolor="#8a7e70" cellpadding="0px" cellspacing="0" align="center" width="600px">
  <tr style="background-color:#ffffff" align="center">
   <td>
    <img src="#" alt="corners top">
   </td>
  </tr>
  <tr style="background-color:#ffffff" align="center">
  	<td>
  	<img src="#" alt="logo">
  	</td>
  </tr>
  <tr style="background-color:#ffffff" align="center">
  	<td>
  	<h1 style="font-size:24pt; font-family:sans-serif; color:#aa212f; text-align:center">Season's Greetings</h1>	
  	</td>
  </tr>
  <tr style="background-color:#ffffff" align="center">
  	<td>
  	<img src="#" alt="Xmas branches">
  	</td>
  </tr>
  <tr style="background-color:#ffffff" align="center">
  	<td>
  		<a href="#"><img src="/#" alt="button"></a>
  	</td>
  </tr>
   <tr style="background-color:#ffffff" align="center">
  	<td>
  		<img src="#" alt="corners bottom">
  	</td>
  </tr>
 </table>
</body>

</html>

Большое спасибо за вашу доброту.

1 Ответ

0 голосов
/ 22 ноября 2018

Когда вы хотите установить атрибут границы таблицы, вы должны иметь в виду, что требуется стиль границы.Определение и использование границы CSS вы можете сослаться на следующий документ W3C: https://www.w3schools.com/cssref/pr_border.asp

Я предлагаю вам установить цвет границы, стиль границы и ширину границы отдельно, например:

<table style="border-color: #8a7e70; border-style: solid; border-width:8px;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>

Или вы можете написать три атрибута вместе:

<table style="border:8px solid #8a7e70;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>

результат выполнения в Chrome и IE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...