Ignore star hack completely in CSSLint?

Question

I have CSS like this to target Internet Explorer 6 specifically.

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100px;
}

When I run CSSLint via

csslint --ignore=star-property-hack test.css

it still shows this error:

width can't be used with display: inline.
    width: 100px;

Is there any fix?

It's generally not a good idea to try and lint code that obviously needs to cater to legacy browsers and therefore cannot be written and maintained according to "good" coding standards. Why do you even need `display: -moz-inline-stack`? I understand if there are users out there who still use IE6, but who uses Firefox 1.x or 2 anymore? — BoltClock, Aug 10 '14 at 04:17
You could put any hacks in a separate style sheet, thus getting them out of the way of the test. As said, if anything, you just need them for IE, so you could then seve them up just to the IEs that need via CCs. (Jeez, it's been years now since I even bothered with that.) — ralph.m, Aug 12 '14 at 08:28

score 2 · Answer 1 · answered Aug 10 '14 at 03:28

2

that's correct... when display is inline, width has no meaning. Why would you set display to inline instead of inline-block?

Nevertheless, try putting the star property in another style with the same selector:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 100px;
}

.inline-block {
    *display: inline;
}

answered Aug 10 '14 at 03:28

gp.

8,074
3
38
39

The *display:inline is a hack for IE, which I follow from: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ – Ryan Aug 10 '14 at 07:38
I know. does the solution i provided works for you? effective css will still be the same and csslint wont complain too... – gp. Aug 10 '14 at 10:08

score 0 · Answer 2 · edited Aug 17 '14 at 00:19

The display: inline failover would be needed only if you need support for IE6 (IE7 and later understand display: inline-block without issues). I would recommend the following:

If you need to support IE6:

Separate the hack into a conditional stylesheet, only for IE6:

In Your Main Stylesheet:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

In ie6.css:

.inline-block {
    display: inline;
    zoom: 1;
}

If you don't need to support IE6:

Just use the code:

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

And be happy.

Ignore star hack completely in CSSLint?

2 Answers2

If you need to support IE6:

If you don't need to support IE6: