Проблемы с переполнением CSS и отображением

Question

У меня проблема с 3 div.

У меня есть контейнер, который является контейнером ("position : absolute; z-index: -1"), а два других - подконтейнеры ("position : absolute; z-index: *n*"), переигрываемые с целью анимации. В любом случае два подконтейнера имеют «сетку» пролетов ("position: relative; display: inline-block"). с фиксированным размером 25x25 px, а у пространств есть фоновая форма изображения спрайта. проблема в том, что переполнение контейнера, похоже, не влияет (т. е. промежутки, которые должны быть скрыты, по-прежнему отображаются, по-видимому, он не подчиняется «высоте» свойства элемента) субконтейнерам. Любые идеи для решения?

У меня нет другой таблицы стилей или в стилях документа, все создается на ходу с помощью JS & jQuery. обеспечит снимок экрана через 8-10 ч = D

Браузер протестированных является последним FF (20,0) в Ubuntu

РЕДАКТИРОВАТЬ Здесь скрипка 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. Вы используете overflow:hidden на #map, где структура является так:

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

Это все хорошо, за исключением того, что #layer1 и #layer2 позиционируются абсолютно, который берет их из потока страницы, за исключением. Вы можете вырезать дно, применив overflow: к скрытым слоям, если хотите, но не на #map.

jsFiddle

#layer1, 
#layer2 { 
    overflow:hidden; 
}