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.