Most Common IE Bugs and How to Fix Them

Internet Explorer – the bane of most web developers’ existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let’s get started.

 

1. Centering a Layout

Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.

Consider the Following Code:

#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
}

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px auto;

}

The output you’d expect:

But what IE actually gives you:

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the marginproperty. Fortunately, this is easily fixed.

The Fix

The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.

#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
    text-align: center;
}

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px 0;
        text-align: left;

}

2. Staircase Effect

Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:

<ul>
    <li><a href="#"></a></li>
    <li><a <span cla

分享到：

IE6 and the !important rule | The Save for Web Feature

• 2010-07-30 23:11
• 浏览 254
• 评论(0)
• 分类:Web前端
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论