2011-07-30 5 views
0

私は学習の練習として何かしようとしてきましたが、これはかなりシンプルだったはずですが、IE 8.私はちょっとしたダイアログのように見えるWebページを、タイトル要素、本文、およびOKとCancelボタンのあるフッターで描画しようとしています。以下は、Firefoxでうまくいく単純な例です(今はボタンがありません)。ウィンドウの左上に小さな正方形が表示されます。もちろん、IEはそれを巨大な全幅と高さの四角形として描きます。重要なのは、私は幅を指定したくないということです。なぜなら、このレイアウトをさまざまなデータで何度も使用することを計画しているからです。設定のズーム:1を設定してから*表示:インラインを追加することについてのコメントがありましたが、動作させることはできません。かなり簡単な解決法はありますか、あるいは私はただテーブルをあきらめて使用するだけですか?おかげインラインブロックに関するもう1つの質問と、IEとFirefoxなどが同じように動作するようにする方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>HI THERE</title> 
    <style> 
    .dialog { 
    background: red; 
    display: inline-block; 
    zoom: 1; 
    *display: inline;  
    } 
    .dialog-title { 
    background: blue; 
    margin: 10%; 
    } 
    .dialog-item { 
    background: yellow; 
    clear: both; 
    } 
    .dialog-footer { 
    background: green; 
    margin: 10%; 
    } 
    .dialog-ok { 
    display: inline; 
    float: left; 
    background: black; 
    } 
    .dialog-cancel { 
    display: inline; 
    float: right; 
    background: brown; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="dialog"> 
    <form> 
    <div class="dialog-title">DIALOG TITLE</div> 
    <div class="dialog-item"><input type=text name=item1 size=20 value="ITEM1" /></div> 
    <div class="dialog-item"><input type=text name=item2 size=20 value="ITEM2" /></div> 
    <div class="dialog-footer"> 
     <div class="dialog-ok">button1</div> 
     <div class="dialog-cancel">button2</div> 
    </div> 
    <div style="clear: both;"></div> 
    </form> 
    </div> 
    </body> 
</html> 

答えて

1

このDOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

Quirks Modeの原因となります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

あるいは、さらに簡単に、HTML5のDOCTYPE:あなたは完全な "HTML 4.01移行" DOCTYPEに切り替えた場合

は、問題が解決されます

<!DOCTYPE html> 
+0

はあなたの先生ありがとうございました!とてもシンプルだが、CSS noobsが理解するのは難しい。 – Matt

関連する問題