10 Common CSS Browser Compatibility Issues/Bugs You Must Know

When you write a CSS for your project you never know what kind of bug or issue you will face at time of browser compatibility.

Internet Explorer (IE) and Mozilla Firefox are the standard browsers which are globally considerable at time of browser compatiblity. Other browsers such as Chrome, Safari and Opera have a significant presence as well.

In today's scenario browser bugs with CSS can be an incredible source of frustration for Web designers and developers. In this post I'm sharing some most common CSS browser compatibility Issues/Bugs. Here's the following list:

1. How To Attack An Internet Explorer (Win) Display Bug

Great article, tutorial on how to figure out IE bugs, including making sure it isn't a bug first, validating. Covers {position: relative;}, the peekaboo bug, dimensional bug fixing, the expanding box trick, the Holly hack, source code, and more. Easy to understand.

2. The IE/Win Disappearing List-Background Bug

It's another IE bug caused by placing a list with a background set within a floated <div> that has been relatively positioned. Problem and solutions discussed here.

3.IE6 Duplicate Characters Bug

This IE6 bug causes duplicate characters to appear, which is caused by HTML comments. Shouldn't happen, of course, but that's IE6 for ya! See this article/tutorial that explains the bug, how to fix it, and how to avoid it.

4. How to resolve browser compatibility issues while working with JavaScript, AJAX and XML

After going through this article, you will get an idea on resolving browser compatibility issues while working on JavaScript, AJAX and XML. When we run an application which you develop using AJAX and XML it behaves differently in different browsers like mostly in IE (Internet Explorer) and Mozilla Firefox.

5. Double-Margin Bug, Float-Width Bug, Pixel Gap Bug

This article covers CSS bugs such as Double-Margin Bug, Float-Width Bug and Pixel Gap Bug. A very clear and clean solution to reslove these issues.

6. CSS Min-Height Bug

This article describes how you can handle CSS Min-Height in different browsers. CSS: min-height with !important is tricky thing you can use.

7. IE White-Space Bug

There are cases in which IE treats the white space "\n" between and the next as a literal linefeed. That creates extra space between list items.

8. Cross Browser Compatible CSS Opacity

Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet.

You can also look detail article by A List apart

9. Clearing floated images in body text

A problem that I’ve been running into more often in these days of CSS based layouts than I did back in the old table days is the “image-sticking-out-of-the-bottom-of-the-content-area” problem that often occurs when an image is floated left or right, and there isn’t enough text to exceed the height of the image. A problem that sometimes had no easy fix.

10. Firefox CSS Magic

Consider this post an evolving receptacle for Firefox-specific CSS tricks. This article covers: Change the color of highlighted text, Change the opacity of an element, Control item selection of an element, Round the corners of elements, Add an outline to an element, Add a multi-colored, multi-layered border to an element etc.

Recomendation:

Browser Compatibility Development Guide

9 Most Common IE Bugs and How to Fix Them

Do you know any CSS browser compatibility issue/bug, please leave a comment.

Related Posts :