How to inline-block in

Question

I want to show some rating stars, which are aligned as repeated images with inline-block as follows:

<span class="stars" style="width:20px; margin-top:15px;">
    <span style="width:40px;"></span>
</span>

span.stars, span.stars span {
    display: inline-block;
    background: url(http://www.ulmanen.fi/stuff/stars.png) 0 0px repeat-x;
    height: 16px;
}

https://jsfiddle.net/gwtd1rLc/1/

Problem: inline-block, thus the images are not shown properly.

Question: how could I refactor it so that it works in all/most browsers?

I've flagged a duplicate; the accepted answer there will give you the solution for IE7 and possibly IE6. But seriously... do you *really* still need to support people using IE7 and IE6? Really?? — Simba, Nov 24 '15 at 12:56
Basically no one is using IE6 and IE7 anymore.. And if they do, it is their problem. If you support IE8, that should be good enough. — razemauze, Nov 24 '15 at 13:07
It's not because we show the webpage embedded inside a tool, and inside there is an embedded old web browser that behaves like — membersound, Nov 24 '15 at 13:09

score 1 · Accepted Answer · answered Nov 24 '15 at 12:53

1

Try using this for < IE8

*zoom: 1;
*display: inline;

answered Nov 24 '15 at 12:53

Collins Abitekaniza

4,496
2
28
43

And how would I add this only for – membersound Nov 24 '15 at 12:54
Use a conditional stylesheet. Although it should be noted including this won't break anything newer. See the proposed duplicate question. – Michael Nov 24 '15 at 12:56
1

you don't need a conditional stylesheet. The stars at the start of the lines there are an IE-specific hack (the syntax is invalid CSS but IE<8 recognises it anyway, so the styles are therefore only applied in IE<8; this is a well-known hack for this kind of thing) – Simba Nov 24 '15 at 12:57
1

@membersound Simba is right,just add it to your css element – Collins Abitekaniza Nov 24 '15 at 13:01

How to inline-block in

1 Answers1