我制作了一些 HTML 来模拟我开发的软件的所需输出。我已确认(尽我所能)该文件的格式正确，但是当我在 Chrome 或 IE 中打开它时(也可能在其他浏览器中出现)，浏览器更改了我提供的 HTML，给出了错误的输出。
我创建的 HTML 是:
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;vertical-align:top;text-align:left}
table{border-collapse:collapse;}
</style>
</head>
<body>
<table style="margin-left:15pt">
<tr>
<table>
<tr>
<td style="width:315.43pt"/>
<td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt">
Thursday, May 04, 2017
</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="height:14.26pt"/>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt">
Dear Someone,
</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="height:21.95pt"/>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td>
<table>
<tr>
<td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt">
This text represents the contents of the email.
<br/>
<br/>
Blah Blah
<br/>
<br/>
Bibble.
<br/>
<br/>
Note how the line breaks get stripped from the text!
</td>
</tr>
</table>
</td>
<td style="width:5.24pt"/>
<td style="vertical-align:top">
<table>
<tr>
<td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;">
This text represents the contents of the emai.
<br/>
<br/>
Blah Blah
<br/>
<br/>
Bibble.
<br/>
<br/>
HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)!
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="height:43.7pt"/>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width:0.06pt"/>
<td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
This image could be the signature:
</td>
<td style="width:77.95pt"/>
<td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
This image is from the internet
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
但是当我在 chrome 中打开它并查看源代码时，我得到:
<!DOCTYPE html>
<html><head>
<style>
*{margin:0;padding:0;vertical-align:top;text-align:left}
table{border-collapse:collapse;}
</style>
</head>
<body>
<table style="border-collapse:separate;">
<tbody><tr>
</tr></tbody></table><table>
<tbody><tr>
<td style="width:315.43pt">
</td><td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt">
Thursday, May 04, 2017
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td style="height:14.26pt">
</td></tr>
</tbody></table>
<table>
<tbody><tr>
<td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt">
Dear Someone,
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td style="height:21.95pt">
</td></tr>
</tbody></table>
<table>
<tbody><tr>
<td>
<table>
<tbody><tr>
<td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt">
This text represents the contents of the email.
<br>
<br>
Blah Blah
<br>
<br>
Bibble.
<br>
<br>
Note how the line breaks get stripped from the text!
</td>
</tr>
</tbody></table>
</td>
<td style="width:5.24pt">
</td><td style="vertical-align:top">
<table>
<tbody><tr>
<td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;">
This text represents the contents of the emai.
<br>
<br>
Blah Blah
<br>
<br>
Bibble.
<br>
<br>
HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)!
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td style="height:43.7pt">
</td></tr>
</tbody></table>
<table>
<tbody><tr>
<td style="width:0.06pt">
</td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
This image could be the signature:
</td>
<td style="width:77.95pt">
</td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
This image is from the internet
</td>
</tr>
</tbody></table>
</body></html>
我知道输出是很多嵌套表格，但我正在尝试采用类似于 word 文件的不确定输入，并将其正确呈现为可通过电子邮件发送和显示的 HTML。我只是想知道为什么浏览器会像这样更改 html，如何阻止它这样做，如果我能够用我的 html 发送电子邮件，浏览器在通过网络邮件查看时是否仍会修改输出？
最佳答案
浏览器在解析 HTML 时修改它，因为它正在执行错误恢复。
你有很多错误 a validator会接起来。
最主要的是一个表格行元素<tr>只能有表格数据单元格 <td>和表格标题单元格 <td>作为它的 child 。你不能在那里放另一张 table 。
您可以将表格放在数据单元格中，但这几乎没有语义意义。
关于html - 浏览器修改我的 HTML，导致输出不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43844689/