Common browser compatibility issues and workarounds (ongoing collection of updates)

Issue One: Different browser tags default margin and padding are different

Workaround: * {margin:0; padding:0;}

Question two: IE6 double margin (block attribute +float+ horizontal margin)

Description: such as Div+css layout, <div style= "float:left;margin-left:10px;" ></div>, IE6 show the distance margin-left:20px

Workaround: _display:inline

Issue three: 3 pixels between floating and non-floating elements under IE6

Note: When an element floats, the same level of text does not float, and the IE6 creates a 3-pixel bug between them. such as: <div> test test </div>, then the picture and text will appear 3 pixels.

Workaround: CSS hack such as: <div><span style=" margin-right:5px; _ margin-right:2px; " > Test test </span></div>

Question four: IE6 tag has a minimum default row height

Note: When setting a label with a smaller height (typically less than 10px), the label height exceeds the height you set

Workaround: Set Overflow:hidden, or set row height line-height less than the height you set

Issue five: IE6 does not support min-height/max-height/min-width/max-width

Solution: {min-height:200px; height:auto!important; height:200px; overflow:visible;}

Question six: Picture is spaced by default

Description: When several IMG tags are placed together in a layout, some browsers will have default spacing

Workaround: Use the Float property for the IMG layout

Question VII: Compatibility of transparency

Workaround: filter:alpha (opacity=80);/*ie supports this attribute */

opacity:0.8;/* support for CSS3 Browser */

Common browser compatibility issues and workarounds (ongoing collection of updates)