CSS溢出和显示的问题

Question

我有3个div的问题。

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

我没有任何其他样式表，或者在文档样式中，所有内容都是随着JS＆amp; jQuery的。将在8-10小时后提供截图= D

测试的浏览器是Ubuntu中的最新FF（20.0）

修改 这是一个小提琴jsFiddle

Answer 1

正常情况下，display:inline或inline-block元素的问题是由于通常会占用它们的文本大小而产生的。解决这个问题的方法是使用line-height。由于您根本没有任何文字，因此可以将其设置为0。

jsFiddle

#layer1 {
    line-height:0;
}

我在Chrome 26和Firefox 20中测试过它。

以下是使用CherryFlavourPez

中的vertical-align:top的替代解决方案

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;
}