Every developer has been in this situation, after finishing the development of a site and it is time–time for IE browser compatibility testing. After loading the site in IE6/IE7/IE8 and everything looks out of position. Where do you start with IE Browser Compatibility? Most developers start making IE specific styles, some use JavaScript to detect the user’s browser,some uses css hacks etc.I am going to go through a few tips in trying to develop for IE Browser Compatibility
Some points to keep in mind while coding, to avoid much issues in IE
1) Limit use of absolute or relative positioning.
Limit the use of css properties like position:absolute and position:relative
2) No negative numbers.
We can give -ve values for margin and padding. IE has a hard time with negatives. If you are using,better off making the element styled as display:block;. This tends to fix some negative issues.
3) Use Wrappers to contain groups of elements.
Using wrappers around the elements, more than one may be necessary. The outer-most wrapper of a site usually has a margin:auto; to center all content, all subsequent child elements will be in floated blocks, i.e., float:left; or float:right.Usually only the content containers (usually divs). Pick a float (left or right) and stay consistent.
4) Treatment of anchor tags.
Always make them display:block;. Use line-height and/or padding to make the height of the block larger.
5) Double Check HTML structure for syntax/parse errors.
IE is extremely checks elements being properly closed. Some pages won’t even finish loading. Double check your code and make sure everything is buttoned up. Newer browsers tend to auto-correct these mistakes
6) Using UL inside of an LI
When creating nested navigation with multiple unordered lists (ul) do not make a UL a first-level child of an LI. In order to create nested navigation that works in all versions of IE, you must create a DIV wrapper to act as a buffer for the nested UL.
Some ways to alter css for IE browsers only
Conditional comments
Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 onwards.
Example of conditional comment
<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>
In the above code, only IE6 will execute the codes written in between the
condition and rest browser skip this.
Below are a few conditional comments that reveal the IE version you’re using.
<!–[if IE]>
this portion will execute only if browser is IE
<![endif]–>
<!–[if IE 6]>
this portion will execute only if browser is IE6
<![endif]–>
<!–[if IE 7]>
this portion will execute only if browser IE 7
<![endif]–>
<!–[if IE 8]>
this portion will execute only if browser IE8
<![endif]–>
<!–[if IE 9]>
this portion will execute only if browser IE9
<![endif]–>
<!–[if gte IE 8]>
this portion will execute only if browser is IE 8 or higher
<![endif]–>
<!–[if lt IE 9]>
this portion will execute only if browser is lower than IE 9
<![endif]–>
<!–[if lte IE 7]>
this portion will execute only if browser lower or equal to 7
<![endif]–>
<!–[if !IE]> –>
According to the conditional comment this is not IE
<!– <![endif]–>
We usually use this statements for calling specific CSS for IE specific browser version.
For Example
If we want to use a separate css for ie 7. we create a specific css file for ie 7 and call this css using the conditional statement.
That is if external css file is ie7_css_only.css
we write conditional statement in head section of HTML like
<!–[if IE 7]>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”ie7_css_only.css” />
<!– <![endif]–>
Note: In the conditional statement css we don’t need to write the whole css , we have to write only the css we want to change in IE7. That is consider a “<p>” tag in html page,and in all browser it is coming properly and IE7 only if it is coming left word. Then we have to add the “<p>” tag css declarations in ie7_css_only.css and add margin or padding extra to make it proper with other browsers.
Another way of altering the css property are by CSS Hacks.
Css hacks are not only for IE other browsers also have hack codes.This is a little more easy to code but this wont pass W3 validation. For css hack we have to add some
code that are not in css property. So W3 wont validate.if we are not bothering about w3 validation we can use.
Below are some css Hacks
For IE 6 and below we can use below code.Here we dont want to create a new css file. Just add this below to our normal style in same css file.
* html {}
For Example
.myclass
{
background-color:red;
}
Consider this “.myclass” is applied to a div and this css will apply to all browser with background color red.And if we are adding our hack code just below like
.myclass
{
background-color:red;
}
* html .myclass
{
background-color:green;
}
In the above case all browser will apply red to the div background but ie 6 will have background green.Like this we can alter the css property.
Below are the some other css hack for IE versions.
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
There is a backslash hack for IE8 and IE 9
width:300px; // normal for all browsers
width:300px\9; // ie 8 and 9 will read this line.
Another css hacks for ie
#element {
color:orange;
}
#element {
*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green/IE8+9; /* IE8+9 */
}
:root #element { color:pink /IE9; } /* IE9 */
Some of the common bugs in IE which causing issues in IE browser are
1) The Box Model problem — IE6
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
For this
IE 6 takes width as 100px. but mordern browser takes width as 124px.
2)The Double Margin Bug — IE 6
div#box {
float: right;
margin-right: 20px;
}
IE 6 will double the 20px to 40px.Causing potentially huge layout issue
3) No Min Widths / Min Height — IE 6/7
This is another big issue . Ie 6 completely ignores this.
4)No Hover States –IE 6
Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute.
5) No Alpha Transparent PNG Support–IE 6
IE6 doesn’t natively support it.
6) Line height issue–IE 6
The graphic shows Internet Explorer 6’s inconsistent rendering of the line-height. The line-height is made exceptionally large to exaggerate the effect of the bug
7) Fixed position bug in ie 7
In ie 6 position fixed will not take properly as other browser
8 ) Width auto bug
In ie 7 if we declare a floating div with width:auto property, ie7
will give 100% width to that div.
9) Space Between List Items
IE 6 adds vertical spacing even none is specified in specific cases.
10) Auto Overflow and Relatively Positioned Items
In this bug when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside.Its shows scroll bars in parent div
11)Inability to Have Elements with Small Heights
As part of creating a layout,if we need to create elements with very small heights as custom borders for elements. Usually, we have to add height: XXpx to the style’s declarations. but ie will give more height to that element
Some Java script libraries to altering css properties
Some JavaScript libraries are now available to alter the css. The main logic behind all are like detecting which browser (JavaScript has inbuilt function to detect the browser) and giving css
http://rafael.adm.br/css_browser_selector/
In this above link we can download add one js, after that we can target each browser with specific versions and give css.
Another javascript lib to avoid IE bugs is
http://code.google.com/p/ie7-js/
In the above link there are specif libraries to avoid bugs in ie. They have overridden the unsupported properties of ie.
All most all browser capability issues are coming due to bugs in IE versions .In IE 9 almost all are fixed but some are not yet!
As a leading website design & mobile app development company we have established ourselves as a provider of enterprise class solutions with the technical prowess gained in over 13 years of industry experience.With the help of our talented Rails Developer from RailsCarma We started working on client projects based on Ruby on Rails Development right in the initial days of this technology and have, since grown into RoR experts along with its development.
