Cross-browser CSS

Today I did something CSS cross-browser testing. Here are some of my findings today.

  • Validate Xhtml / Html before styling. I put form element between table and tr element which make it an invalid xhtml document and cause CSS rendering in a strange way in IE. (IE is generally bad in W3C standards but this time it is good – it reminds me to validate xhtml.)
  • -webkit-border-fit:lines

    is for Sarifi and Chrome only, making elements “shrink”, even block elements.
    > selector can’t be understand by IE6 and under.

  • Few people are using IE5.5 or under, so I decide not to bother about layout in IE5.5 or under.
  • Block elements have overflow by default to show in IE6, So if I want to set the height of a block element, I need also set
    overflow:hidden
  • Cleaning elements with
    clear:both

    to clear floating elements above better be placed inside the same parent element of floating elements, otherwise in IE6, the elements after cleaning elements will not align nicely. for example:

    
    <div class="parent-element">
        <div class="floating-element">...</div>
        <div class="floating-element">...</div>
        <div class="cleaning-element">&nbsp;</div>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *