IE9中不可预测的嵌套div水平位置
|
我绝不是HTML或CSS方面的专家，但我通常可以绕开逻辑问题。这让我难过。
我在父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>
没有找到相关结果
已邀请:
1 个回复
外镶受继