2017-05-08 43 views
0

我有一些HTML来制作我开发的软件的期望输出。我已经确认(尽我所能)文件的格式正确,但是当我在Chrome或IE中打开它时(也可能出现在其他浏览器中),浏览器会更改提供给我的错误输出的HTML。浏览器修改我的HTML,导致不正确的输出

我创建的HTML是:

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     *{margin:0;padding:0;vertical-align:top;text-align:left} 
     table{border-collapse:collapse;} 
     </style> 
    </head> 
    <body> 
     <table style="margin-left:15pt"> 
      <tr> 
       <table> 
        <tr> 
         <td style="width:315.43pt"/> 
         <td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt"> 
          Thursday, May 04, 2017 
         </td> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td style="height:14.26pt"/> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt"> 
          Dear Someone, 
         </td> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td style="height:21.95pt"/> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td> 
          <table> 
           <tr> 
            <td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt"> 
             This text represents the contents of the email. 
             <br/> 
             <br/> 
             Blah Blah 
             <br/> 
             <br/> 
             Bibble. 
             <br/> 
             <br/> 
             Note how the line breaks get stripped from the text! 
            </td> 
           </tr> 
          </table> 
         </td> 
         <td style="width:5.24pt"/> 
         <td style="vertical-align:top"> 
          <table> 
           <tr> 
            <td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;"> 
             This text represents the contents of the emai. 
             <br/> 
             <br/> 
             Blah Blah 
             <br/> 
             <br/> 
             Bibble. 
             <br/> 
             <br/> 
             HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)! 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td style="height:43.7pt"/> 
        </tr> 
       </table> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td style="width:0.06pt"/> 
         <td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt"> 
                      This image could be the signature: 
         </td> 
         <td style="width:77.95pt"/> 
         <td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt"> 
                      This image is from the internet 
         </td> 
        </tr> 
       </table> 
      </tr> 
     </table> 
    </body> 
</html> 

但是,当我在Chrome中打开它,查看源代码,我得到:

<!DOCTYPE html> 
<html><head> 
     <style> 
     *{margin:0;padding:0;vertical-align:top;text-align:left} 
     table{border-collapse:collapse;} 
     </style> 
    </head> 
    <body> 
     <table style="border-collapse:separate;"> 
      <tbody><tr> 
       </tr></tbody></table><table> 
        <tbody><tr> 
         <td style="width:315.43pt"> 
         </td><td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt"> 
          Thursday, May 04, 2017 
         </td> 
        </tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td style="height:14.26pt"> 
        </td></tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt"> 
          Dear Someone, 
         </td> 
        </tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td style="height:21.95pt"> 
        </td></tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td> 
          <table> 
           <tbody><tr> 
            <td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt"> 
             This text represents the contents of the email. 
             <br> 
             <br> 
             Blah Blah 
             <br> 
             <br> 
             Bibble. 
             <br> 
             <br> 
             Note how the line breaks get stripped from the text! 
            </td> 
           </tr> 
          </tbody></table> 
         </td> 
         <td style="width:5.24pt"> 
         </td><td style="vertical-align:top"> 
          <table> 
           <tbody><tr> 
            <td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;"> 
             This text represents the contents of the emai. 
             <br> 
             <br> 
             Blah Blah 
             <br> 
             <br> 
             Bibble. 
             <br> 
             <br> 
             HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)! 
            </td> 
           </tr> 
          </tbody></table> 
         </td> 
        </tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td style="height:43.7pt"> 
        </td></tr> 
       </tbody></table> 


       <table> 
        <tbody><tr> 
         <td style="width:0.06pt"> 
         </td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt"> 
                      This image could be the signature: 
         </td> 
         <td style="width:77.95pt"> 
         </td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt"> 
                      This image is from the internet 
         </td> 
        </tr> 
       </tbody></table> 



</body></html> 

我知道这个输出是很多嵌套表,但我试图将一个不确定的输入类似于一个单词文件,并正确地将其呈现为可以通过电子邮件发送和显示的HTML。我只是想知道为什么浏览器改变了这样的html,如何阻止它这样做,如果我能够发送一个电子邮件与我的HTML浏览器仍然修改输出时,通过网络邮件查看?

+0

我不认为这种改变浏览器自己做。您是否清除浏览器缓存并再次加载网站? –

+0

请描述你改变HTML的含义。你也不能把'table'作为'tr'的直接子对象,必须是'tr> td>表' – Justinas

+2

你的HTML首先是无效的。所以输出绝不是不正确的。 – BoltClock

回答

1

浏览器在解析HTML时会修改HTML,因为它正在执行错误恢复。

你有很多错误,其中a validator会拿起。

主要的是表格行元素<tr>可以只有表格数据单元<td>和表格标题单元<td>作为其子元素。你不能在那里放置另一张桌子。

您可以在数据单元格中放置一个表格,但几乎不会产生语义意义。

+0

谢谢,这实际上是我第一次使用HTML,而且我并没有真正考虑过事后应该怎么看待这个问题。 –

相关问题