z-index在ipad中运行得不好

Question

我正在为朋友(http://pasionesargentas.com/sm/)建立一个网站,其中包含带有缩略图翻转的全屏画廊(http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with- thumbnail-flip /).我不太喜欢翻盖的想法所以我只是喜欢禁用它并添加一个菜单.菜单div css就像

#top {
position:fixed;
background: transparent;
display: block;
z-index: 99999;
}

它适用于Chrome,Safari,Explorer和Opera.但出于某种原因,她无法在iPad上看到菜单.因为我没有ipad,所以我下载了Ripple Mission Control并且工作正常,所以我不知道发生了什么.

现在,问题是:我必须为平板电脑浏览器(iPad)做不同的CSS吗？或者是画廊弄乱菜单并覆盖它？

Answer 1

.description {
position: fixed;
top: 5px;
left: 50px;
text-shadow: 1px 1px 1px black;
z-index: 5;
}
#nav:hover {
background: #829FB0;
opacity: 1.0;
filter: alpha(opacity=100);
z-index: 10;
}
#nav {
align: center;
background: #829FB0;
padding: 3px 7px;
display: inline;
opacity: 1.0; //change this later
filter: alpha(opacity=65);
-moz-border-radius: 9px;
border-radius: 9px;
z-index: 10;
}

问题可能是透明的覆盖 div，所以首先用此代码替换您的代码，其中必须放置在较高位置的 div/节点不透明，然后看看，也使用我给出的 z 索引，您也不需要很高的价值

检查 css 中的错误时，请确保使节点可见并删除其不透明度，并且切勿为 z 索引指定过高的值。试试这个，如果不行我会仔细看看。