Cross browser common CSS issues

Web developers mostly face cross browser CSS problems. These issues mostly arise while working in Fireforx, IE, Safari, Opera etc. Here I've discussed some common CSS issues:

• Firefox requires a clearing element for floats where Opera does not. If you use floating elements in your layout, it often breaks up in Firefox if you don't have an element with CSS "clear" attribute. Opera isn't as strict as Firefox on this one - I don't know which is the correct behavior.
  
  
• hr tags look different in almost all browsers. Also, hr tag doesn't style in a very crossbrowser-friendly way. If you want a fancier horizontal rule than a 1px line, consider using a div instead.
  
  
• Internet Explorer does not understand CSS vertical-align properly. When centering things and using line-height+vertical align, it doesn't work properly in IE. Try using relative positioning or margins instead.
  
  
• Firefox may display CSS margins differently from IE and Opera. I tried moving a block of elements down so an absolutely positioned element would appear properly above them. It worked fine in IE and Opera but Firefox moved down the absolutely positioned element too. Try using padding instead.
  
  
• Internet Explorer does not support the :hover property in any other element than a. If you want to use :hover styles in other elements than links, create a class with the same styles as the hover and use JavaScript onmouseover and onmouseout instead.
  
  
• Internet Explorer ignores top margins of elements right after absolutely positioned elements.
  
  
• Internet Explorer treats img tags in a weird way and seems to add padding/margin to them even if you set them to zero. This can be fixed by wrapping the image in a div, setting the div to have position: relative and then setting the img to have position: absolute. No left or top attributes are needed. Note that this only works if your image has a set width and height because the wrapper div needs to have defined width/height. If the image's width/height may change, try using overflow: hidden on the div.
  
  
• Internet Explorer does not support CSS attribute selectors (ie. input[type=text]). Use classes instead.
  
  
• Internet Explorer requires text-align:center to center the content of a page. Usually you'd use margin:0 auto to center an element; This doesn't work in IE. To center in IE, give the parent element of the element you want to center the attribute text-align: center. Remember to give the centered element text-align: left, otherwise its contents will be centered too.