Question

我真的想制作一张缩略图墙，以适应2560x1440px的屏幕分辨率

我希望网格位于我的网页后面，作为网站的背景。

但是当页面滚动时，网格保持不变。

我做了一些css和html并在firefox4和chrome中测试了它似乎工作正常，

但是在IE8中它不起作用，页面div不会与网格墙重叠，而是位于网格墙下面。

任何人都可以了解如何通过简单的方式实现跨浏览器兼容性。

提前致谢，

约翰

###############################更新

在IE上测试css / html时使用正确的格式。而不是仅仅在页面上抛出css和html。

感谢Guffa的回答。

Sam Bowler对z-index的回答也很好。

我没有在IE浏览器中尝试过，但它确实有效，所以我现在暂时不花时间。

谢谢Guffa和Sam

Answer 1

那是因为你没有HTML文档。你只是在浏览器上放了一些HTML标签，浏览器会尽力使用它，并且做得非常好。

由于您没有doctype标记，IE会以怪异模式呈现页面，这基本上意味着它会尝试模拟最古老的完成所有操作的方式。由于position:fixed是最近添加的，因此在此模式下不支持。

有效的HTML文档需要html，head，title和body标记，并且您需要doctype标记以防止浏览器呈现怪异模式下的页面。因此，在标准兼容模式下呈现的最小HTML文档如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

您的style标记位于head标记内，内容位于body标记内。

您可以使用不同的doctype代码，具体取决于您要使用的HTML版本，请参阅W3C's Recommended list of Doctype declarations。

Answer 2

如果无法合并背景图像，则需要使用z-index。给#grid一个比#wrap更低的z-index，你将被排序（只要两个元素都定位，它们就在那一刻）。

#grid { position: fixed; z-index: -1; }
#wrap { position: relative; z-index: 1; }

Answer 3

如何将缩略图合并为一个png / jpg文件？然后你可以：

body
{
    background: url('thumbnails.jpg');
}

不再需要摆弄z-index。

css缩略图网格墙作为墙纸？

3 个答案: