IE 7つの問題：スーパーシンプルなページ - TDの高さが

効果を服用していないこれは私のマークアップです：tdの高さが影響を取っていない理由IE 7つの問題：スーパーシンプルなページ - TDの高さが

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Test title</title> 
     <style type="text/css"> 
     * 
     { 
      margin:0px auto; 
      padding:0px; 
     } 
     html,body 
     { 
      height:100%; 
      width:100%; 
     } 
     </style> 
    </head> 
    <body> 
     <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;"> 
     <tr> 
      <td style="height:55px;background:#CCC;" valign="top"> 
       <h1>Header</h1> 
      </td> 
     </tr> 
     <tr> 
      <td valign="top"> 
       Content @RenderBody() 
      </td> 
     </tr> 
     <tr> 
      <td style="height:85px;background:#CCC;" valign="bottom"> 
       Footer 
      </td> 
     </tr> 
     </table> 
    </body> 
</html>

誰も教えてもらえますか？このマークアップはIE9でも動作します。それはHTML5のdoctypeに起因するのでしょうか？

出典

2012-03-23 TCM

これをW3Cバリデーターで実行すると、エラーが発生します。おそらく、それらを修正するでしょうか？ –

まず、ページレイアウトへのアプローチを間違いなく再考する必要があります。表は、ページレイアウトを設定するのではなく、表形式のデータを表示するためにのみ使用してください。可能であれば、Cascading Style Sheets（CSS）やDIVなどのレイアウト要素を調べる必要があります。

ただし、高さのスタイルはChromeで適用されるようで、ここの情報：http://www.w3schools.com/css/css_table.aspで有効です。

上記のように、コードをW3Cバリデーターhttp://validator.w3.org/で実行してみてください。

可能であれば、テーブルの使用を中止して、インラインスタイルの代わりに外部CSSを使用して要素をスタイルすることをお勧めします。これはもっとモダンで柔軟性があり、意味的に正しいアプローチです。いくつかの古いチュートリアルに従っている可能性があります。

こちらがお役に立てば幸いです。

出典

2012-03-23 06:03:49

私はアンソニーがあなたに与えた情報から、彼のテーブルの内容が表形式のデータではないと結論づけることができたと聞いて興味があります！ –

あなたはそうです、それはブラウザでコードをロードすることを前提としており、100％の幅と高さで、彼はテーブルで何らかのレイアウトをしようとしているように見えます。私の経験（私は1994年以来ウェブサイトを構築してきました）から、ほとんどの表形式のデータには、ヘッダー付きのものと、コンテンツ付きのものと、フッター付きのものがあります。ヘッダーとフッターの列は、おそらくブラウザウィンドウの上部と下部に意図的に固定されていません。おそらくアンソニーはこの問題を解決し、より適切なフィードバックを提供することができます。 –

@Alex：これはデモページです。私が使用しているインラインスタイルからはっきりと分かっていることを願っています。私は貿易によってデザイナーではないが、私はデザインについてこれを多く知っていると思う。そして、はい、私はテーブルだけを使用したいと思います。これは表形式のデータのみを表しています。おそらく、ヘッダーを行1に、フッターを行3に変更して、より明確にする必要があります。こんにちはアンソニー、明確化のために感謝します。 – TCM

いいえ、html5 doctypeが原因ではありません。 IE7での問題を引き起こして

あなた<table cellspacing="0" cellpadding="0" style="width: 100%; height:100%">

、

これからheight:100%を削除し、あなたのコンテンツに適した高さを与えてください。

<!DOCTYPE html> 
    <html> 
     <head> 
       <title>Test title</title> 
       <style type="text/css"> 
        * 
        { 
         margin:0px auto; 
         padding:0px; 
        } 
        html,body 
        { 
         height:100%; 
         width:100%; 
        } 
       </style> 
     </head> 
     <body> 
      <table cellspacing="0" cellpadding="0" style="width: 100%;"> 
       <tr> 
        <td style="height:55px;background:#CCC;" valign="top"> 
         <h1>Header</h1> 
        </td> 
       </tr> 
       <tr> 
        <td valign="top" style="position:relative; height:100px;"> 
         Content @RenderBody() 
        </td> 
       </tr> 
       <tr> 
        <td style="height:85px;background:#CCC;" valign="bottom"> 
         Footer 
        </td> 
       </tr> 
      </table> 
     </body> 
    </html>

また、他の回答として、html/cssマークアップを作成する一般的な方法に従ってください。

希望します。

出典

2012-03-23 06:16:48 Jack

あなたがコメントを与えられた場合、常に完全に助けてください。 – Jack

@anthonyあなたはこのコードを試しましたか？ – Jack

IE 7つの問題：スーパーシンプルなページ - TDの高さが

答えて

関連する問題