2017-05-08 7 views
0

開発したソフトウェアの出力をエミュレートするためにHTMLを作成しました。私はファイルが正しくフォーマットされていることを(私ができる限り)確認しましたが、ChromeやIEで開くと(他のブラウザでも発生する可能性があります)、ブラウザーは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> 

しかし、私はクロームでそれを開いてソースを表示したときに私が手::

私が作成した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="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」の意味をご記入ください。また、 'tr'の直接の子として' table'を持つことはできません。 'tr> td> table' – Justinas

+2

あなたのHTMLは最初は無効です。したがって、出力は決して正しくありません。 – BoltClock

答えて

1

ブラウザは、エラーリカバリを実行しているため、解析する際にHTMLを変更します。

a validatorには多くのエラーがあります。

主なものは、テーブル行要素<tr>は、テーブルデータセル<td>とテーブルヘッダーセル<td>のみを子として持つことができることです。そこに別のテーブルを置くことはできません。

データセルにテーブルを置くことはできますが、それは意味が分かりません。

+0

ありがとう、これは本当に初めてのHTMLを使用して私は実際に見て最初のものの一つだったはずだったはずだと思った。 –

関連する問題