html页面渲染chrome与IE
html页面渲染chrome与IE
提问于 2020-08-15 01:24:08
chrome版本: 84.0.4147.125 (官方版本)(64位) IE版本: 11.1806.16299.0 (更新版本11.0.185)
在IE中不能正确呈现html页面表。表头未对齐。如图所示，仅在IE中表头不能正确对齐。同一页在chrome中以正确对齐的标题行正确呈现。
<!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
Stack Overflow用户
发布于 2020-08-17 10:56:20
我不确定为什么有这么多内联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文件中。
- 我认为你不需要创建嵌套表。尝试使用DIVs，如果您想使用表，则尝试使用标签来创建头文件。
- 我不确定您在上面发布的表格是否是动态生成的。但是如果你是手动创建的，那么我认为你选择了一种非常复杂的方式。尝试开发能够在跨浏览器上工作的适当CSS，并确保您在代码中使用的CSS属性在目标浏览器中得到很好的支持。你可以参考官方文档来了解浏览器对任何特定CSS属性的支持。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63417394
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号