html 页面渲染 chrome vs IE
[英]html page rendering chrome vs IE
问题描述
chrome version: 84.0.4147.125 (Official Build) (64-bit) IE version: 11.1806.16299.0 (Update versions 11.0.185) 
chrome 版本：84.0.4147.125（官方构建）（64 位） IE 版本：11.1806.16299.0（更新版本 11.0.185）
The html page table does not render correctly in IE. html 页表无法在 IE 中正确呈现。 the table headers are mis-aligned.表头未对齐。 As the picture shows, the table headers are not aligning properly only in IE.如图所示，表头仅在 IE 中未正确对齐。 The same page renders properly with properly aligned header rows in chrome.在 chrome 中正确对齐的 header 行可以正确呈现同一页面。
---------------------------------html code --------------------------- ---------------------------------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 width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="50%"> :</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" alt="" /></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 width="50%"> </td> </tr> </table> </body> </html>
1 个解决方案
解决方案1
0 2020-08-17 02:56:19
I am not sure why there is so much inline CSS code.我不确定为什么有这么多内联 CSS 代码。 It is not a good idea to generate the nested table using complicated inline CSS code.使用复杂的内联 CSS 代码生成嵌套表不是一个好主意。
I noticed that for the table headers you have created another table within a table.我注意到对于表格标题，您在表格中创建了另一个表格。
In that table below code is causing the issue.在下表中，代码导致了问题。
<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>
You have set the width for each td tag that is causing the issue in the IE browser.您已为在 IE 浏览器中导致问题的每个 td 标签设置了宽度。
If you modify the value of the width then you can notice that headers side borders will move.如果您修改宽度的值，那么您会注意到标题侧边框会移动。
Below are some helpful points that may help you to fix the issue.以下是一些可以帮助您解决问题的有用点。
Try to write all the CSS code in the style tag or write it in a separate CSS file.
尝试将所有 CSS 代码写入样式标签中或将其写入单独的 CSS 文件中。I think you do not need to create nested tables.
我认为您不需要创建嵌套表。 Try to use DIVs and if you want to use the table then try to use TH tag for creating the headers.尝试使用 DIV，如果您想使用表格，请尝试使用 TH 标签来创建标题。I am not sure whether the table you had posted above is generated dynamically.
我不确定您在上面发布的表格是否是动态生成的。 but if you have created it manually then I think you have chosen a very complex way.但是如果您手动创建它，那么我认为您选择了一种非常复杂的方式。 Try to develop a proper CSS that can work on cross-browser and make sure that the CSS properties you are using in your code are well supported in target browsers.尝试开发一个合适的 CSS 可以在跨浏览器上工作，并确保您在代码中使用的 CSS 属性在目标浏览器中得到很好的支持。 You can refer to the official docs to know about the browser support of any specific CSS property.您可以参考官方文档以了解任何特定 CSS 属性的浏览器支持。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在Chrome扩展程序的后台页面中呈现HTML - Rendering HTML in a background page in a chrome extension
在iframe中设置HTML页面样式的问题（在Chrome和IE中） - Problems with styling HTML page in an iframe (in Chrome and IE)
IE渲染HTML的方式与Firefox，Chrome和iOS不同 - IE rendering HTML differently than Firefox, Chrome, and iOS
.php和.html。 IE为什么渲染它们不同？ - .php vs .html . Why is IE rendering them differently?
Chrome在Web服务器和本地服务器上呈现html / css的方式有所不同 - Chrome rendering html/css differently on webserver vs locally
为什么我的Aspx页面在FireFox和IE中呈现不同的HTML - Why is my Aspx page rendering different HTML in FireFox and IE
IE与Google Chrome - IE vs Google Chrome
换行符在IE和Chrome中的呈现方式有所不同 - Linebreaks rendering differently in IE and Chrome
字符渲染不同（IE / Chrome） - Character rendering is different (IE/Chrome)
Chrome中的HTML文件呈现 - HTML file rendering in Chrome
相关标签