Today with the growing internet network we have variety of Browsers to access http. Few popular browsers are Internet Explore, Firefox, Safari, Google Chrome etc. When we are releasing a website or any web product at that time we are fetching variety of users from many locations of globe. Some body uses IE (Internet Explore) or some body with Mozilla Firefox to access our web resources. Here point comes about Cross Browser Compatibility.
First let us discuss what is Cross Browser Compatibility. In simple Cross Browser Compatibility says is the page user is watching compatible to all browsers available in the market. Is the page User Interface (UI) is running properly or is there any functionality breaks for any specific browser. Take an example about PNG Transparency image file. In case of Mozilla Firefox it is showing correct transparency but in IE its not. Like this many Browser Compatibility issues we faced in our day today Developments. Watch the list below for major Cross Browser Compatibility issues.
- UI Inconsistency
- Image Rendering
- Font Rendering
- Font Size
- Clearing Floats
- PNG image Transparency
UI Inconsistency
As a developer you marked many time the UI you designed is looking great in Firefox but the time you are watching the same page in IE or Safari it is getting disturbed. These issues are related to Style-sheets. It can be fixed using CSS Hacks. In below I am sharing major attribute CSS hacks for most common used Browsers.
/* CSS Hack for IE6 */
#myClass { _color: red }
/* CSS Hack for IE6, IE7 */
# myClass { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
# myClass { color/**/: blue }
/* CSS Hack for IE6, IE7, IE8 */
# myClass { color: blue; }
/* CSS Hack for IE7, IE8 */
# myClass { color/*\**/: blue; }
/* CSS Hack for IE6, IE7 -- acts as an !important */
# myClass { color: blue !ie; }
/* CSS Hack for Mozilla Firefox */
-moz-border-radius: 0 0 0 0;
/* CSS Hack for Google Chrome */
-webkit-border-radius: 0 0 0 0;
Image Rendering
Image Rendering is an another browser compatibility issue. To avoid this use proper sized images in your app. Don’t try to re-size the image using programming.
Font Rendering
In several browser font renders differently. For an example if you found your Font is having a unnecessary shadow effect use the following to prevent this.
Text-shadow: #000 0 0 0;
Font-Size
About font-size Browser Compatibility issue many browsers are rendering font-size differently. To fix this issue you need to specify the font size as a percentage in the body element then size it in em’s through the rest of the sheet. For line height, you need to define it in em’s, rather than pixels, for consistent rendering.
Clearing Floats
There are a few different solutions for clearing. The best solution however, is a simple overflow: auto or overflow: hidden in your container. Also prefer to use Clear: both when moving from once segment to other in your web app.
PNG Transparency
In case of a Transparent png image you can see this is working correct in Firefox rather not working in Internet Explorer. There are a few solutions for this particular Browser Compatibility issue. You can either use AlphaImageLoader for IE specific stylesheet, link to a behavior file in an IE specific style-sheet or use JS to fix the issue. No matter which way you choose; there is no way to have transparent repeating background images.
