我绝不是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; }
我猜这个问题是类之间的关系,但我确实无法找到它。任何帮助都会得到很好的回复。
这是HTML
<!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>
答案 0 :(得分:0)
所以我的第一个观察是你的包装纸高度设置为380px,当你的包装盒为553px时,它会立即打破你的盒子。
现在我们继续讨论问题的症结你理解CSS中的定位你已经将你的包装器浮起来了,我认为期望内部的所有内容都会在该包装器中落实到位。
然后你继续定位绝对元素,这实际上取消了定位的控制,使其不再相对于你左边漂浮的包装,它现在相对于屏幕的左上角有一定程度(尽管这不是在每种情况下都完全正确。)
您需要将您的定位更改为亲戚并从包装中移除高度,通过固定盒子模型并允许将您的版权定位为相对于HTML中旁边的框。
希望这会有所帮助