3

我有 3 个 div 的问题。

我有一个是容器（"position : absolute; z-index: -1"），另外两个是子容器（"position : absolute; z-index: *n*"），用于动画目的。无论如何，这两个子容器都有一个 spans( "position: relative; display: inline-block") 的“网格”。固定大小为 25x25 像素，跨度具有背景图像形式的精灵。他的问题是容器的溢出似乎并没有影响子容器（即应该隐藏的跨度仍然显示，似乎它不遵守元素的“高度”属性）。任何解决方案的想法？

我没有任何其他样式表，或者在文档样式中，一切都是使用 JS 和 jQuery 随时随地生成的。将在 8-10 小时后提供屏幕截图 =D

测试的浏览器是Ubuntu中的最新FF(20.0)

编辑 这是一个小提琴jsFiddle

4

1 回答 1

2

通常，由于通常占据它们的文本大小，会出现问题display:inline或元素。inline-block对此的补救措施是玩弄line-height. 由于您根本没有任何文本，因此您可以安全地将其设置为0.

jsFiddle

在此处输入图像描述

#layer1 {
    line-height:0;
}

我在 Chrome 26 和 Firefox 20 中对其进行了测试。

这是使用vertical-align:topCherryFlavourPez的替代解决方案

jsFiddle

#layer1 span {
    vertical-align:top;
}

关于overflow. 您正在使用overflow:hidden的#map结构是这样的：

<div id="map">
    <div id="layer1">
    <div id="layer2">
</div>

这一切都很好，除了#layer1和#layer2绝对定位这将它们从页面流中取出。overflow:如果需要，您可以通过对图层应用隐藏来切割底部，但不能在#map 上。

jsFiddle

#layer1,
#layer2 {
    overflow:hidden;
}
于 2013-04-10T08:43:12.623 回答