Inline-block element inside link: strange behavior in IE 8

Question

I have an inline-block "circle" element inside <a> tag.

<a href="#" id="map-start-photo-link" class="map-link start">
    фотогалерея
    <span class="circle"></span>
</a>

The behavior is fine in Chrome - hovering and clicking works good. But in IE8 only circles' borders seems to count as link: clicking and hovering in the inner area doesn't work.

here's the project (circles are square in IE8, but it's ok): http://coob.bitbucket.org/

http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working and also border-radius wont work in IE8 — Vivek Vikranth, Mar 18 '14 at 11:18

score 1 · Answer 1 · answered Mar 18 '14 at 11:41

1

Apply CSS property display: inline-block; to span.

answered Mar 18 '14 at 11:41

web.aliraza

29
3

Good one Nice approach – Saif Asif Mar 18 '14 at 11:43
seems like it's already there. what span are you talking about? – Cubius Mar 18 '14 at 11:45
I think its the position: absolute; on both and tags - try giving a a lower z-index and a greater z-index. that must fix it. – web.aliraza Mar 18 '14 at 12:00
@user3404794, nope, it's not working. it's really funny that spans reacts on border hovers and clicks – Cubius Mar 18 '14 at 12:12

score 0 · Accepted Answer · answered Mar 20 '14 at 06:17

0

Don't mess with z-indexes. I've set z-indexes for header, footer, draggable map and links explicitly (and with positive numbers, just in case) and now it works in IE8.

answered Mar 20 '14 at 06:17

Cubius

1,294
2
15
33

Inline-block element inside link: strange behavior in IE 8

2 Answers2