Блог

Главная - Вопросы по программированию - рендеринг HTML-страницы chrome против IE

рендеринг HTML-страницы chrome против IE

#html #css #google-chrome #internet-explorer #html-table

#HTML #css #google-chrome #internet-explorer #html-таблица

Вопрос:

версия chrome: 84.0.4147.125 (официальная сборка) (64-разрядная) Версия IE: 11.1806.16299.0 (обновленные версии 11.0.185)

Таблица html-страниц отображается некорректно в IE. заголовки таблиц неправильно выровнены. Как показано на рисунке, заголовки таблиц не выровнены должным образом только в IE. Та же страница отображается правильно с правильно выровненными строками заголовка в chrome.

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%">amp;nbsp;</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%">amp;nbsp;</td>
    </tr>
  </table>
</body>

</html>

Ответ №1:

Я не уверен, почему так много встроенного 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>

Вы установили ширину для каждого тега td, который вызывает проблему в браузере IE.

Если вы измените значение ширины, то вы можете заметить, что боковые границы заголовков будут перемещаться.

Ниже приведены некоторые полезные моменты, которые могут помочь вам устранить проблему.

  1. Попробуйте записать весь CSS-код в тег style или записать его в отдельный CSS-файл.

  2. Я думаю, вам не нужно создавать вложенные таблицы. Попробуйте использовать DIVs, и если вы хотите использовать таблицу, тогда попробуйте использовать тег TH для создания заголовков.

  3. Я не уверен, генерируется ли таблица, которую вы опубликовали выше, динамически. но если вы создали это вручную, то, я думаю, вы выбрали очень сложный способ. Попробуйте разработать правильный CSS, который может работать в кроссбраузерном режиме, и убедитесь, что свойства CSS, которые вы используете в своем коде, хорошо поддерживаются в целевых браузерах. Вы можете обратиться к официальным документам, чтобы узнать о поддержке браузером любого конкретного свойства CSS.