Shulou(Shulou.com)06/02 Report--

DIV+CSS design IE6, IE7, Firefox compatibility is what, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Whether you are familiar with DIV+CSS design IE6, IE7, Firefox compatibility issues, here to share with you, for pages designed entirely using DIV+CSS, you should pay more attention to the compatibility of IE6, IE7, Firefox to the CSS style.

DIV+CSS Design IE6, IE7, Firefox compatibility

DIV+CSS page layout this is a trend, I also began to comply with this trend, but when using DIV+CSS website design, we should pay attention to the compatibility of css style with different browsers, especially for pages designed entirely using DIV+CSS, we should pay more attention to the compatibility of IE6, IE7, Firefox to CSS style, otherwise, your page may be a mess! I was often overwhelmed by these things, so I found some information on the Internet, plus my own understanding and experience these days, and sorted out some materials, some of which I haven't used and can't understand. I glued it directly from other places. I don't know if there are any mistakes. I hope it will be helpful to you when I use it later.

What is browser compatibility: when we use different browsers (FirefoxIE7IE6) to visit the same website, or pages, there will be some incompatibility problems, which will display normally in this browser, but will be messed up in another browser. We will be very annoyed when we write CSS. We have just fixed the problem in this browser, but there is a new problem in another browser. All right, I'll take it all right, then I'll use your incompatibility to write a css and let them do their own. Now it's time for you to lose your temper, hehe.

One! important (limited in function)

With IE7's support for! important, the! important method is now only compatible with IE6. Pay attention to the way you write. Remember that the location of the declaration needs to be advanced.)

For example:

# example {width 100pximportantanceship IE7Firefox / width:200px;/*IE6*/}

Second, the method of CSSHACK

The first thing you need to know is:

Height:100px is common to all browsers

IE6-specific _ height:100px

* + height:100px for IE7

IE6 and IE7 share * height:100px

IE7 and Firefox share the same height of 100px flowers.

For example:

# example {height:100px;} / * Firefox*/ * html#example {height:200px;} / * IE6*/ * + html#example {height:300px;} / * IE7*/

The following method is relatively simple

To give a few examples:

1 、 IE6-IE7+Firefox

# example {height:100px;/*Firefox+IE7*/ _ height:200px;/*IE6*/} in fact, this method can also be used by # example {heightbank 100pximportantbank / Firefox IE7 / height:200px;/*IE6*/}.

2 、 IE6+IE7-Firefox

# example {height:100px;/*Firefox*/ * height:200px;/*IE6+IE7*/}

3 、 IE6+Firefox-IE7

# example {height:100px;/*IE6+Firefox*/ * + height:200px;/*IE7*/}

4. IE6IE7Firefox is different.

# example {height:100px;/*Firefox*/ _ height:200px;/*IE6*/ * + height:300px;/*IE7*/} or: # example {height:100px;/*Firefox*/ * height:300px;/*IE7*/ _ height:200px;/*IE6*/}

It is important to note that the order of the code must not be reversed, or all previous efforts will be wasted. Because when the browser interprets the program, if it has the same name, it will cover the front with the latter, just like assigning a value to the variable, so we put the general one in front, and the more specific it is, the more it is placed behind.

Explain the code for 4:

When reading the code, * line height:100px; is common to everyone, and IE6IE7Firefox shows 100px

On the second line * height:300px;Firefox does not recognize this attribute, IE6IE7 recognizes it, so Firefox also shows 100px, while IE6IE7 overrides the height attribute obtained from the * * line, showing 300px

In the third line _ height:200px;, only IE6 knows it, so IE6 overwrites the height you get in the second line, and finally shows 200px

In this way, all three browsers have their own height properties, so go and play with each other.

So if you don't understand, either you hit the wall or I will! But you'd better go.

Oh, I almost forgot to say:

The compatibility of * + html with IE7 must be guaranteed with the following declaration at the top of the HTML:

Third, use IE-specific condition notes

It looks like I'm going to make up three sets of css. I haven't used it yet. I'll stick it over first.

If condition Hack of IE

1. All except IE can recognize 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Note: gt=GreatThen is greater than

> = > greater than sign

Lt=LessThen is less than

Div > div > div >

3. Universal float closure

Add the following code to the GlobalCSS and add class= "clearfix" to the div that needs to be closed.

Code:

/ * ClearFix*/ .clearfix: after {content: "."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block;} / * HidefromIEMac\ * / .clearfix {display:block;} / * EndhidefromIEMac*/ / * endofclearfix*/ style >

: after (pseudo object), which sets the content that occurs after the object, which is usually used with content. IE does not support this pseudo object and is not supported by Ie browsers, so it does not affect IE/WIN browsers. This kind of one is the most troublesome.

4. Overflow:auto (I just saw it, highly recommended)

Just add overflow:auto to the CSS of the parent DIV.

For example:

.parent {width:100px;overflow:auto} .son1 {float:left;width:20px;} .son2 {float:left;width:80px;} div > div > div >

The author's original words: the principle is that the reason why the peripheral elements do not extend well is the overflow, because the overflow is not visible (see W3C explanation). Now as long as you add a "overflow:auto" to the peripheral elements, you can solve the problem, and the result is that apart from IE, you can really solve the problem. Next, we are going to solve the problem of IE, and add "_ height:1%", and the problem is completely solved.

I tried it, but it's fine under IE without adding "_ height:1%". Keep it.

6. Some compatibility details that need to be paid attention to

1 setting padding for div in div will cause width and height to increase (actual width of DIV = DIV width + Padding), but IE will not.

Solution: set the width of IE and Firefox for DIV, and add the IE unique mark "*" to the width of IE.

2, the problem of page center.

Body {TEXT-ALIGN:center;} is sufficient under IE, but fails under Firefox.

Solution: add "MARGIN-RIGHT:auto;MARGIN-LEFT:auto;"

Sometimes I see some strange gaps on IE6.

Solution: try adding "font-size:0px;" to the gap DIV.

4, about the hand cursor. Cursor: pointer. Hand is only applicable to IE.

5, double the distance generated by floating IE6

# box {float:left; width:100px; margin:000100px;}

In this case, IE6 will produce the distance of 200px.

Solution: add display:inline to make the float ignore

Here, let's talk about the two elements of block,inline in detail. The characteristic of the Block element is that it always starts on the new line, and the height, width, line height and margin can be controlled (block element). The characteristic of the Inline element is that it is on the same line as other elements. Uncontrollable (embedded element)

# box {display:block;// can simulate embedded elements as block elements display:inline;// to achieve the effect of arranging on the same line

6 minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is a min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height will not be set under IE at all. For example, to set the background picture, this width is more important.

Solution: to make this command work on IE, you can use a

Put it under the tag and specify a class for div:

Then CSS designed it like this:

# container {min-width:600px; width:e ­xpression (document.body.clientWidth DIV > DIV >

For the above code, let's talk about my understanding:

*. As long as the width attribute is defined in right, two lines will definitely be displayed under Firefox.

Second, if both width are defined as percentages, even if both are 100%, a row will be displayed under IE. So the above sentence "this is the key" doesn't work at all, it's on a line if you don't add it, unless you width defines a numerical value.

So the above code is not very useful, at least not under Firefox. In fact, as long as only define the width of left, right does not define width, no matter under IE or Firefox can be successful, but in this case the parent DIVBOX does not really include LEFT and RIGHT two sons DIV, can be solved with the fifth method I mentioned above. The easiest way is to add float:left to RIGHT and OK it.

9, truncated ellipsis

.hh {- o text-overflow:ellipsis; white-space text: overflow flowers; text-overflow:ellipsis; white-space: overflow}

This is after exceeding the length, it will automatically truncate the extra text and end with an ellipsis. Technology is good technology, and many people like to misuse it, but note that Firefox does not support it.

After reading the above, have you mastered how DIV+CSS designs the compatibility of IE6, IE7 and Firefox? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.