2011-05-26 5 views
1

私はHTMLやCSSの専門家ではありませんが、私は論理的なものの周りに頭を浮かべています。これは私に困ってしまった。IE9の予測不可能なネストされたdivの水平位置

親div内でdivを(フォームを運ぶように)ネストしました。私は、その位置を絶対に設定し、底をゼロにして、それが親の底に現れるようにします。次に、私が望む正確な左と下のインデントを設定するためのマージンを指定しました。

IE9でプレビューするとうまくいきますが、アップロードしてオンラインで見ると、IE9はネストされたdivの方法を右側にレンダリングしました。互換モードを選択すると問題が解決しました。

私はネストされたdivを(親の中に)残しました。問題は敬意を表します。互換性モードを選択しない限り、IE9はそれを元に戻します。

これは私のCSSです:

.wrapper {float:left; width:100%; height:380px;background-image:url(../images/top_bck.png); background-repeat: repeat-x; background-position: top;} 

.box {position:absolute; top:40%; left:50%;width:832px; height:553px; margin:-180px 0 0 -416px;background-image:url('../images/back.jpg'); background-repeat: no-repeat; background-position: bottom;} 

.right { position:relative; float:right;width:580px; height:254px; text-align: left;padding:10px; margin-top:183px;} 

.form {position:absolute;bottom:0; float:left; width:400px; padding:0px 0px 0px 36px; display:block; margin-bottom:4px; } 

私は問題はクラス間の関係の一つであるが、私は確かにそれを見つける傾けることを推測しています。どんな援助も大いに受けられるでしょう。

はここ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Site Coming Soon :: Company :: Company Description</title> 
<link rel="shortcut icon" href="favicon.ico" /> 
<!-- Loads Master CSS --> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" /> 
</head> 
<body> 
<div class="wrapper"> 


<div class="box"> 
    <div class="content"> 



     <div class="right"> 
       <h2>Site coming soon.</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       <h3>Sed diam nonummy.</h3>Sed diam nonummy. Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. 
       <h3>Be informed:</h3>Enter your email address below and be notfied as soon as our site goes live. 
       <div class="form"> 
        <form id="form1" name="form1" method="post" action=""> 
         <label> 
          <input type="text" name="emailForm" id="emailForm" /> 
         </label> 
         <label> 
          <input type="submit" name="submitButton" id="submitButton" value="notify me" /> 
         </label> 
        </form> 
       </div> 
     </div> 
    </div> 

</div> 
<div class="footer"> 
    &copy; Company Ltd 2011. Company registered in England and Wales. Registered Company Number 0000000. 
</div> 
</div> 
</body> 
</html> 
+1

ようこそスタックオーバーフローへようこそ。あなたのHTMLを追加することができれば助けになります。 [jsFiddle](http://jsfiddle.net)または[JS Bin](http://jsbin.com/)のテストケースを作成することができればさらに役立ちます。 – thirtydot

+0

Doctypeは何ですか? –

+0

私のDoctypeリファレンスは次のとおりです:<!DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> – Phil

答えて

0

CSSを見て、私は私はあなたが1つの段ボール箱で始まり、大きなものの内部で他のボックスを置く意味これによって、良いアナロジーは、段ボール箱のアナロジーで見つけるHTMLです。意図した "内部"のボックスが大きすぎる場合、最初のボックスが破損し、すべてがボックスから外れます。

私の最初の観察では、ラッパーの高さは380pxに設定されています。ボックスのサイズが553pxの場合、すぐにボックスが破損します。

今、私たちはあなたのラッパーを左に浮かしてしまったCSS内での位置づけを理解していますので、その中のすべてがそのラッパー内に収まると思います。

次に、絶対要素の配置に進みます。これは、左に浮かんだラッパーを基準にした位置の制御を実質的に削除します。これは画面の左上隅からの相対的な範囲になりますあらゆる場合に完全に真実ではない)。

相対的な位置に変更し、ラッパーから高さを削除する必要があります。ボックスモデルを修正し、著作権の位置をHTML内のボックスの相対位置にすることができます。

これが役に立ちます。