我有一个设计,需要两个背景图像,必须在IE工作。所以我决定把一个图像放在html标签上,另一个放在正文标签上。所以我的页面看起来是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<p>Lorem...</p>
</body>
</html>
一个非常基本的css
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }
唯一能正确呈现这一点的浏览器是IE7。Opera、Chrome、FF都在顶部留出20像素的空白。我可以通过添加一些hackity css来删除此边距,例如:
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }
但是为什么一开始就不起作用,为什么我需要额外的?这是一个错误还是一个设计上的错误?
编辑
:它确实是一个bug。当我移除
<p>
标签然后它的行为正确,但与他们没有。
