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

Question

大家，

我设计了一个快速的HTML文档，该文档将合并到Outlook中（因此需要在HTML内部具有内联样式）。 在Chrome和Safari上一切正常，但是IE11显示以下问题。 表格边框被弄乱了，就像里面有两种颜色一样，而不是只有一种，就像Chrome上的好颜色一样。 此外，Firefox似乎忽略了该颜色的表格设置，而是显示了该表格的斜角版本。有人对此有想法吗？ 我在下面粘贴示例图片和我的代码。

该图片描述了IE中的bug与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>

非常感谢您的好意。

Answer 1

当您要设置表格的border属性时，请记住必须使用border-style。 CSS边框的定义和用法可以参考以下W3C文档： https : //www.w3schools.com/cssref/pr_border.asp

我建议您可以分别设置border-color，border-style和border-width，例如：

<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中的运行结果

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-11-22 07:58:13

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-22 07:58:13

解决方案1
0 已采纳 2018-11-22 07:58:13