如何解决html页面渲染Chrome与IE
chrome版本:84.0.4147.125(正式版本)(64位) IE版本:11.1806.16299.0(更新版本11.0.185)
html页表在IE中无法正确呈现。表标题未对齐。如图所示,表头仅在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 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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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',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>
解决方法
我不确定为什么会有这么多内联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标签设置了宽度。
如果您修改width的值,那么您会注意到标题的侧边框会移动。
以下是一些有用的观点,可以帮助您解决问题。
-
尝试在样式标签中编写所有CSS代码,或将其写入单独的CSS文件中。
-
我认为您不需要创建嵌套表。尝试使用DIV,如果要使用表格,则尝试使用TH标签创建标题。
-
我不确定您上面发布的表是否动态生成。但是,如果您手动创建了它,那么我认为您选择了一种非常复杂的方法。尝试开发适用于跨浏览器的CSS,并确保目标浏览器很好地支持您在代码中使用的CSS属性。您可以参考官方文档以了解任何特定CSS属性对浏览器的支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。