CSS溢出和显示问题

Question

我对3div有意见。

我有一个容器("position : absolute; z-index: -1")，另外两个是用于动画目的的子容器("position : absolute; z-index: *n*")。无论如何，这两个子容器有一个跨度("position: relative; display: inline-block")的“网格”。与固定大小25x25px和跨度有背景图像形式雪碧。他的问题是，容器的溢出似乎不影响子容器(即应该隐藏的跨度仍在显示，似乎不服从元素的“高度”属性)子容器。有什么解决办法吗？

我没有任何其他样式表，或者在文档样式中，所有东西都是用JS & jQuery生成的。将在8-10小时后提供屏幕截图

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

编辑这里是一个小提琴jsFiddle

Answer 1

通常，display:inline或inline-block元素的问题是由于通常占用它们的文本的大小而产生的。解决这一问题的方法是玩弄line-height。因为您根本没有任何文本，所以可以安全地将其设置为0。

jsFiddle

​

​

#layer1 {
    line-height:0;
}

我在Chrome 26和Firefox 20上测试了它。

下面是使用来自vertical-align:top的CherryFlavourPez的替代解决方案

jsFiddle

#layer1 span {
    vertical-align:top;
}

关于overflow。您在#map上使用的是#map，结构是这样的：

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

除了#layer1和#layer2绝对定位之外，这一切都很好，这使它们脱离了页面的流程。如果你想要的话，你可以通过将overflow:隐藏在图层上，而不是在#地图上。

jsFiddle

#layer1,
#layer2 {
    overflow:hidden;
}