IE表边框错误-在Chrome和Safari上可以

所有人，

我设计了一个快速的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>

非常感谢你的好意。

当您想要设置表的border属性时，您应该记住border样式是必需的。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 中的运行结果

相关内容

最新更新

热门标签：