2017-05-08 284 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,而且我並沒有真正考慮過事後應該怎麼看待這個問題。 –