Which is the CSS hack you use most often and which one do you avoid using?

Question

I am asking this question so that I can understand different views of different people about CSS hacks and also understand which hacks are good and which ones are not.

This question should be marked Community wiki because it is a subjective topic. — Chetan S, Feb 27 '10 at 04:30
@rockinthesixstring: Sorry, I did not get that. What if there are some things which work differently in different browsers? Can you give some example or links where I can read about changing my designing style to avoid hacks? I would love it if I can do that without compromising functionality. — Cracker, Feb 27 '10 at 04:46

score 3 · Answer 1 · answered Feb 27 '10 at 04:31

3

Not technically a hack, but I often include conditional comments to target IE 7-:

<!--[if lte IE 7]>
<link href="ie7.css" />
<![endif]-->

I actually get away without using many hacks.

answered Feb 27 '10 at 04:31

Joel

19,175
2
63
83

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

Most used - clear fix

Most hated - !important rules because they are an indication that the stylesheet is probably not organized properly. It also means that some styles are too general that they ought to be. Not good for performance either.

edited May 23 '17 at 12:18

Community

1
1

answered Feb 27 '10 at 04:29

Chetan S

23,637
2
63
78

score 0 · Answer 3 · answered Feb 27 '10 at 05:21

0

I mostly use min-height hack and avoid using underscore trick something like _margin that targets IE6.

answered Feb 27 '10 at 05:21

Sarfraz

377,238
77
533
578

score 0 · Answer 4 · answered Feb 27 '10 at 05:26

0

I've found that if I use the XHTML 1.0 strict doctype, mostly things just work... That said, I don't really do anything fancy... But a nice minimalistic site like SO would be pretty easy to design sans hacks...

answered Feb 27 '10 at 05:26

dicroce

45,396
28
101
140

score 0 · Answer 5 · answered Feb 27 '10 at 05:29

PNG transparency in IE6 with AlphaImageLoader()...

IE versions >6 and Firefox and Chrome all support full 8-bit transparent PNGs, but for IE6 compatibility you have to do the above css hack. Your CSS file will no longer validate but if you rely on transparent PNGs like I do... it's worth it.

score 0 · Answer 6 · answered Feb 27 '10 at 22:45

0

Most Used: Negative Margins

answered Feb 27 '10 at 22:45

contactmatt

18,116
40
128
186

1

Is that a hack or feature? ;) – Joel Feb 27 '10 at 23:36

score 0 · Answer 7 · answered Feb 15 '11 at 23:03

Seems this is the one I have to use most often: create a CSS class .inline-block { display: inline-block; }

use it to style any element you wish to display as inline-block (instead of using display: inline-block; directly). Then, in your IE-only (v.7 or earlier?) file:

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

Sad panda.

Which is the CSS hack you use most often and which one do you avoid using?

7 Answers7