Source
r/webdev•
Iconate

What are your CSS (or HTML) tricks that you commonly use day to day that work in all browsers

The two best examples I can think of are

Using inline-block effectively in all browsers:

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

Using a large value for text-indent:

a{
    text-indent: -9999px;
    text-transform: capitalize; /* Makes it work in IE7, don't ask me why */
}

Posted Nov 7, 2013, 12:05 AM UTC

510
singeblanc•

Sticking to validated code doing what it was designed for.

4
OutThisLife•

You still have to code for IE7? We're dropping IE8..

3
myredhotcar•

IE8 is our main browser at work. It's so depressing writing internal web apps for such an outdated browser...

3
ComplimentingBot•

You should be a poster child for poster children

2
mehphp•

wow I'm sorry. no other options in your area for work?

1
myredhotcar•

Devs can install Chrome - but the actual users have to stick to IE8.

1
runastartup•

None. Better to use conditional statements with alternate stylesheets

2
jml26•

The Phark image replacement method (text-indent: -9999px) has been superseded by a technique by Scott Kellum:

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

And more recently, by another method (by the same guy) that uses @font-face.

I'm in favour of the star hack for targeting IE7, because it puts the hack directly next to the original code (meaning if the code changes, it's obvious that it needs to be changed for IE 7 too), and it doesn't increase specificity, as would be the case if adding conditional classes to the root element. This leads to much cleaner and more maintainable CSS. Nicole Sullivan mentions this briefly in her talk about reducing the complexity of your CSS

1
d3vc47•

I use box-sizing: border-box. I use Modernizr. I use polyfills. I use scss. I let scss calculate what widths to apply to elements. I rarely define pixel widths (except when I have to). I use javascript to help out where the things above are not sufficient. I try to do as much as possible test-driven.

1
a-t-k•

IE up to version 9 adds a system padding to button elements that can be removed by setting

overflow: visible;

This may be counterintuitive, but it works.

1