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 comment