我的设计需要两个背景图像,必须在IE中工作.所以我决定在html标签上放置1个图像,在body标签上放置另一个图像.所以我的页面看起来像这样
<!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都在顶部放置了约20px的边距.我可以通过添加一些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%; }
然而,为什么它开始不起作用,为什么我需要额外的东西?它是设计中的错误还是错误?
编辑:它似乎是一个错误.当我删除< p>标签然后它正确地行动然而它们没有.
最佳答案 而不是使用< p>的余量,而是使用填充.
正如上面提到的那样,它是由利润率下降引起的.