9 Common CSS bugs and workarounds for E-browser

We often see this phenomenon when we browse the Web page: It is normal for a webpage to open in IE6 browser, but opening in IE8 may be completely distorted. Or there is the possibility of a completely opposite phenomenon. This makes it painful for web programmers and designers to behave strangely for their CSS in various versions of IE, sometimes by designing separate definitions specifically for IE6 or IE8. IE is therefore recognized as a Web programmer's poison, although the Microsoft Official network does not provide relevant solutions, but the compatibility of Internet Explorer is the problem is the Web programmer must master. This article summarizes the most common bugs on 9 ie browsers and their solutions.

More than 60% of the time spent in development time on IE has been a struggle with IE bugs, which has severely reduced your development productivity. Ordinary users may not care that the site's developers are trying their best to make their site compatible and stable and easy to use under the browser they are browsing. But being a good web programmer is an important problem that has to be solved effectively. Below for the vast number of Web developers to provide a tutorial, tell you on IE 9 the most common bugs and how to solve them.

1. Center Layout
Create a CSS definition to place an element in the middle, which is something that every web developer would do. The simplest way to do this is to add a Margin:auto to your element, but IE 6.0 will have a lot of strange behavior. Let's take a look at an example.

1. #container {border:solid 1px #background: #77700  30px;} #element {background: #95CFEF; border:solid 1px #36F; width:300px;height:100px;margin:30px Auto;}

Here's what we expect from the output:

But IE gives us such output:

This should be IE 6 to margin auto and does not have the correct settings. Fortunately, this is easy to fix.

Workaround

The simplest approach is to use the Text-align:center property in the parent element, and use text-align:left in the component.

#container {border:solid 1px #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. Stair-style effect
Almost all Web developers use list to create a navigation bar. Here is the code you might use:

<ul><li><a href="#"></a></li><li><a href="  #"></a></li><li><a href="#"></a ></li></ul>ul {list-style:none;} Ul Li a {display:block;width:130px;height:30px;text-align:center;color: #fff; float : left;background: #95CFEF; border:solid 1px #36F; margin:30px  5px;}

A standard-compliant browser would be the following:

But IE is like this:

Here are two solutions

Workaround One

Sets the float property of the LI element.

1. UL li { float: left ;}

Workaround Two

Sets the Display:inline property.

1. UL li {display:inline}

3. Twice times blank for float element
Take a look at the following code:

1. #element {
2. background: #95CFEF;
3. width: 300px;
4. height: 100px;
5. float: left ;
6. margin: 30px 0 0 30px;
7. border: solid 1px #36F;
8. }

The desired result is:

The result of IE is:

Solution Solutions

As with the solution for the bug above, setting the display:inline property resolves the issue.

#element {background: #95CFEF; width:300px;height:100px ; float : left;margin:30px0 030px;border:solid1px#36f;display:inline;}

4. Unable to set micro height
We found that the use of height:xxpx in IE does not set a relatively small height. Here is an example (note that height is 2px):

#element {background: #95CFEF; border:solid 1px #36F; width:300px;height:2px;margin:30px 0;}

Expected Result: The 2px element plus a 1px border.

Results of IE:

Solution One

The cause of this bug is very simple, IE does not allow the height of the component is less than the height of the font, so the following fix is set on the font size.

1. #element {background: #95CFEF; Border:solid1px#36f;width:300px;height:2px;margin:30px0;font0 ;}

Solution II

But the best solution is to use Overflow:hidden .

#element {background: #95CFEF; Border:solid1px#36f;width:300px;height:2px;margin:30px0;overflow:hidden}

5. Cross out the boundary
This bug is hard to read. The Auto property of overflow is used in the parent component, and the associated component is placed in it. You'll see the elements inside are going to cross. Here is an example:

1. 1. 1. <div id="element">
         <div id="anotherelement">
         </div>
         </div>#element {background: #95CFEF; border:solid 1px #36F; width:300px;height:150px;margin:30px 0;overflow : Auto;} #anotherelement {background: #555; width:150px;height:175px;position:relative;margin:30px;}

The desired result:

Results of IE:

Workaround

Set position:relative; properties

1. #element {background: #95CFEF; border:solid1px#36f;width:300px;height:150px;margin:30px0;overflow:auto;position: relative;}

6. Fixing the broken Box Model
Internet Explorer has misinterpreted the "box mold" as perhaps the most unforgivable thing. IE 6 is a semi-standard browser that avoids this, but the problem still arises because IE runs in "weird mode."

Two DIV elements. One is fix, one is not. And their different high and wide plus the sum of padding is not the same. is fixed above, but not below.

Workaround

I believe that this is not an explanation or a demonstration, which is something most people will understand. Here's a pretty weird solution.

1. #element {width:400px;height:150px;padding:50px;}

The above definition means:

1. #element {width:400px;height:150px;height:250px;width:500px}

Yes, you want to add padding to the original length and width. But this fix will only work on IE's "weird mode", so you don't have to worry about IE6 in normal mode.

7. Setting Min-height and Min-width
IE ignores the min-height.

Workaround One

This fix is provided by Dustin Diaz. It takes advantage of the !important below is the code snippet:

#element {min-height:150px;height:auto!important;height:150px;}

　　

Workaround Two

#element {min-height:150px;height:150px;} HTML>body #element {height:auto;}

8. Float Layout Error Behavior misbehaving
The most important thing to use without table layouts is the float element that uses CSS. In many cases, IE6 seems to be working on the groping stage, and sometimes you find a lot of strange behavior. For example, when there is some text in it.

Take a look at the following example:

1. <div id="container"><div id="element">http: // net.tutsplus.com/</div><div id="anotherelement"></div ></div>#element, #anotherelement {background: #95CFEF; border:solid 1px #36F; width:100px;height:150px; margin:30px;padding:10px; float : Left;} #container {background: #C2DFEF; border:solid1px#36f;width:365px;margin:30px;padding:5px;overflow:auto;}

Expected Result:

Results of IE:

You can see the difference.

Workaround

There is no good way to solve this problem. There is only one way, that is to use Overflow:hidden .

#element {background: #C2DFEF; border:solid1px#36f;width:365px;margin:30px;padding:5px;overflow:hidden;}

　　

9. Blank line in the list item door

Let's look at the following example

2.  <ul><li><ahref= " #    >link 1  </a></li>< Li><ahref= "  " >link 2  </a></li><li><ahref= " #  "  >link 3  </a></li></ul>ul {margin:  0  ;p adding:  0  ;list -style:none;} Li a {background: #95CFEF;d isplay:block;}  

    

Expected Result:

Results of IE:

Fortunately, you can use the following method to solve

Workaround One

Define height to resolve

1. Li a {background: #95CFEF;d isplay:block;height:200px;}

Workaround Two

1. Li a {background: #95CFEF; float : left;clear:left;}

Workaround Three
Add display:inlineto Li .

1. Li {display:inline;}

Conclusion

Interface is a difficult thing to tune a CSS HTML interface is a more difficult thing, in IE cut a CSS HTML interface is more difficult.

Now there are many users using IE6 browser, and IE6 is not conducive to the compatibility of web design, and Web development engineers have been working to make their site compatible with IE6 under the browsing. This also brings them a lot of unnecessary burdens, and we hope that users who are still using IE6 will be able to upgrade their Internet Explorer to the latest IE8 so that you can experience more enjoyable online surfing while (hopefully) being able to move through these users (upgrading their outdated browsers) To mitigate the tension and complexity that has been faced by Web development engineers.