Ярлыки выпадают из коробки ⇐ Html

[Anonymous]

Да, мои заголовки отстой :p

Итак, у меня есть контейнер, который содержит элементы . В этом контейнере точками обозначены теги , обозначающие метки. Эти имеют позицию:absolute, чтобы они не мешали макету .

Код: Выделить всё

#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}< /code>

MarkerMarkerMarker

В Internet Explorer это работает нормально.

В Chrome это не так. Метка выпадает из коробки.

Я понимаю, почему это происходит — это потому, что имеет нулевую ширину и высоту внутри документа, что позволяет ему втиснуться в нулевое оставшееся пространство.

Но мне интересно, есть ли другой способ добиться желаемого эффекта?

РЕДАКТИРОВАТЬ: Желаемый эффект, плохой эффект Chrome

Подробнее здесь: https://stackoverflow.com/questions/280 ... of-the-box