html 页面渲染 chrome vs IE
[英]html page rendering chrome vs IE
问题描述
chrome 版本：84.0.4147.125（官方构建）（64 位） IE 版本：11.1806.16299.0（更新版本 11.0.185）
html 页表无法在 IE 中正确呈现。 表头未对齐。 如图所示，表头仅在 IE 中未正确对齐。 在 chrome 中正确对齐的 header 行可以正确呈现同一页面。
---------------------------------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
我不确定为什么有这么多内联 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 代码写入样式标签中或将其写入单独的 CSS 文件中。
我认为您不需要创建嵌套表。 尝试使用 DIV，如果您想使用表格，请尝试使用 TH 标签来创建标题。
我不确定您在上面发布的表格是否是动态生成的。 但是如果您手动创建它，那么我认为您选择了一种非常复杂的方式。 尝试开发一个合适的 CSS 可以在跨浏览器上工作，并确保您在代码中使用的 CSS 属性在目标浏览器中得到很好的支持。 您可以参考官方文档以了解任何特定 CSS 属性的浏览器支持。
在iframe中设置HTML页面样式的问题（在Chrome和IE中）
[英]Problems with styling HTML page in an iframe (in Chrome and IE)
Chrome在Web服务器和本地服务器上呈现html / css的方式有所不同
[英]Chrome rendering html/css differently on webserver vs locally
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.