html页面渲染chrome vs IE
Posted
技术标签:
【中文标题】html页面渲染chrome vs IE【英文标题】：html page rendering chrome vs IE 【发布时间】：2020-12-04 14:45:17 【问题描述】：chrome 版本：84.0.4147.125（官方版本）（64 位） IE版本：11.1806.16299.0（更新版本11.0.185）
html 页表在 IE 中无法正确呈现。表头未对齐。如图所示，表头仅在 IE 中未正确对齐。在 chrome 中使用正确对齐的标题行正确呈现同一页面。
IE chrome
---------------------------------html 代码 ------------ ---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
a
text-decoration: none
</style>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td > </td>
<td align="center">
<a name="JR_PAGE_ANCHOR_0_1"></a>
<table cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 792px; border-collapse: collapse; background-color: white;">
<tr valign="top" style="height:0">
<td style="width:36px"></td>
<td style="width:73px"></td>
<td style="width:81px"></td>
<td style="width:75px"></td>
<td style="width:53px"></td>
<td style="width:68px"></td>
<td style="width:56px"></td>
<td style="width:50px"></td>
<td style="width:67px"></td>
<td style="width:50px"></td>
<td style="width:15px"></td>
<td style="width:55px"></td>
<td style="width:76px"></td>
<td style="width:1px"></td>
<td style="width:18px"></td>
<td style="width:18px"></td>
</tr>
<tr valign="top" style="height:36px">
<td colspan="16">
</td>
</tr>
<tr valign="top" style="height:40px">
<td colspan="10">
</td>
<td colspan="4">
<img src="_ags_e0a2016c-7fd9-49e5-b834-78a984fddbd2.html_files/img_0_0_1" style="height: 40px" /></td>
<td colspan="2">
</td>
</tr>
<tr valign="top" style="height:1px">
<td colspan="16">
</td>
</tr>
<tr valign="top" style="height:20px">
<td>
</td>
<td colspan="13" style="text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 14px; line-height: 1.2578125; font-weight: bold;">GENERAL GAS MAINS REPORT</span></td>
<td colspan="2">
</td>
</tr>
<tr valign="top" style="height:1px">
<td colspan="16">
</td>
</tr>
<tr valign="top" style="height:30px">
<td>
</td>
<td colspan="12">
<div style="width: 100%; height: 100%; position: relative;">
<div style="position: absolute; overflow: hidden; width: 100%; height: 100%; ">
<table cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 100%; border-collapse: collapse;">
<tr valign="top" style="height:0">
<td style="width:719px"></td>
</tr>
<tr valign="top" style="height:30px">
<td style="pointer-events: auto; background-color: #99CCFF; border: 1px solid #000000; ">
</td>
</tr>
</table>
</div>
<div style="position: relative; width: 100%; height: 100%; pointer-events: none; ">
<table cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 100%; border-collapse: collapse;">
<tr valign="top" style="height:0">
<td style="width:73px"></td>
<td style="width:81px"></td>
<td style="width:75px"></td>
<td style="width:53px"></td>
<td style="width:68px"></td>
<td style="width:56px"></td>
<td style="width:50px"></td>
<td style="width:67px"></td>
<td style="width:65px"></td>
<td style="width:55px"></td>
<td style="width:76px"></td>
</tr>
<tr valign="top" style="height:30px">
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">GISID</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Install WO #</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Pipe Line Type</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Nominal Diameter</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Material</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Coating Type</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Bonded Indicator</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Measured Length</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Operating Area</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">Tax Code</span></td>
<td style="pointer-events: auto; border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125; font-weight: bold;">In Service Date</span></td>
</tr>
</table>
</div>
</div>
</td>
<td colspan="3">
</td>
</tr>
<tr valign="top" style="height:25px">
<td>
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">52084809</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Distribution</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">3</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Plastic</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">No</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">458</span></td>
<td colspan="2" style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">OH-1325-Cols Central</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1/1/1980 12:00:00 AM</span></td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:25px">
<td>
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">52095298</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">6101</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Distribution</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">3</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Plastic</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">No</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">33</span></td>
<td colspan="2" style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">OH-1325-Cols Central</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1/1/1992 12:00:00 AM</span></td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:25px">
<td>
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">52095786</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Distribution</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">3</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Plastic</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">No</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">326</span></td>
<td colspan="2" style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">OH-1325-Cols Central</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1/1/1980 12:00:00 AM</span></td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:25px">
<td>
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">52367289</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">6101</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Distribution</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">3</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Plastic</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">No</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">160</span></td>
<td colspan="2" style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">OH-1325-Cols Central</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1/1/1992 12:00:00 AM</span></td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:25px">
<td>
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">52378596</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">6101</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Distribution</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">3</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Plastic</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">No</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">45</span></td>
<td colspan="2" style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">OH-1325-Cols Central</span></td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: left;">
</td>
<td style="border: 1px solid #000000; text-indent: 0px; text-align: center;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1/1/1992 12:00:00 AM</span></td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:307px">
<td colspan="16">
</td>
</tr>
<tr valign="top" style="height:14px">
<td colspan="12">
</td>
<td colspan="2" style="text-indent: 0px; text-align: right;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">1</span></td>
<td colspan="2">
</td>
</tr>
<tr valign="top" style="height:38px">
<td colspan="16">
</td>
</tr>
</table>
<!--[if IE]>
<script>
var links = document.querySelectorAll('link.jrWebFont');
setTimeout(function() if (links) for (var i = 0; i < links.length; i++) links.item(i).href = links.item(i).href; , 0);
</script>
<![endif]-->
</td>
<td > </td>
</tr>
</table>
</body>
</html>【问题讨论】：
【参考方案1】：我不确定为什么有这么多内联 CSS 代码。使用复杂的内联 CSS 代码生成嵌套表不是一个好主意。
我注意到对于表头，您在一个表中创建了另一个表。
在下表中的代码是导致问题的原因。
<div style="position: relative; width: 100%; height: 100%; pointer-events: none; ">
<table cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 100%; border-collapse: collapse;">
<tr valign="top" style="height:0">
<td style="width:73px"></td>
<td style="width:81px"></td>
<td style="width:75px"></td>
<td style="width:53px"></td>
<td style="width:68px"></td>
<td style="width:56px"></td>
<td style="width:50px"></td>
<td style="width:67px"></td>
<td style="width:65px"></td>
<td style="width:55px"></td>
<td style="width:76px"></td>
</tr>
您已为在 IE 浏览器中导致问题的每个 td 标签设置了宽度。
如果你修改宽度的值，你会注意到标题的边边框会移动。
以下是一些可以帮助您解决问题的有用点。
尝试将所有的 CSS 代码写在 style 标签中，或者写在单独的 CSS 文件中。
我认为您不需要创建嵌套表。尝试使用 DIV，如果您想使用表格，请尝试使用 TH 标签来创建标题。
我不确定您上面发布的表格是否是动态生成的。但是如果您手动创建它，那么我认为您选择了一种非常复杂的方式。尝试开发可以在跨浏览器上工作的适当 CSS，并确保您在代码中使用的 CSS 属性在目标浏览器中得到很好的支持。您可以参考官方文档了解浏览器对任何特定 CSS 属性的支持。
【讨论】：
以上是关于html页面渲染chrome vs IE的主要内容，如果未能解决你的问题，请参考以下文章