私は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">
© Company Ltd 2011. Company registered in England and Wales. Registered Company Number 0000000.
</div>
</div>
</body>
</html>
ようこそスタックオーバーフローへようこそ。あなたのHTMLを追加することができれば助けになります。 [jsFiddle](http://jsfiddle.net)または[JS Bin](http://jsbin.com/)のテストケースを作成することができればさらに役立ちます。 – thirtydot
Doctypeは何ですか? –
私のDoctypeリファレンスは次のとおりです:<!DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> – Phil