用CSS溢出和显示

Question

问题我有3个div的一个问题。

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

我没有任何其他的样式表，或文档样式中，对产生的一切与JS &的jQuery的去。后8-10小时= d

的浏览器上测试将提供的屏幕截图是在Ubuntu

最新FF（20.0）

EDIT 这里是一个小提琴jsFiddle

Answer 1

通常问题与display:inline或inline-block元素是由于通常占据它们的文本的大小而产生的。对此的补救措施是玩line-height。由于您根本没有任何文字，因此您可以将其设置为0。

jsFiddle

#layer1 { 
    line-height:0; 
} 

我测试在Chrome 26和Firefox 20.

下面是从CherryFlavourPez

jsFiddle

使用 vertical-align:top一个替代的解决方案

#layer1 span { 
    vertical-align:top; 
} 

---

关于overflow。你在使用#map其中overflow:hidden结构是这样：

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

这是除了这需要他们离开页面的流量的事实#layer1和#layer2绝对定位无一不精。如果需要，可以通过将overflow:隐藏到图层来削减底部，但不会在#map上。

jsFiddle

#layer1, 
#layer2 { 
    overflow:hidden; 
}