Browser compatibility issues when designing DIV CSS!

What is browser compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, there will be some incompatibility problems, and the display will be normal in this browser , it will be messed up under another, and we will be very annoyed when writing CSS. We just fixed the problem of this browser, but another browser has a new problem. Okay, I'm convinced, then I'll take advantage of your incompatibility and write a piece of css each, and let them each perform their own tasks.

1. !important (limited function)
With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember the declaration position Need to advance.)
For example:

#example {
width: 100px !important; /* IE7 FF */
width: 200px; /* IE6 */
}

2. CSS HACK method (novices can take a look, experts should just pass by)

The first thing you need to know is:

Height common to all browsers: 100px;
Dedicated to IE6_height: 100px;
Dedicated to IE7* height: 100px;
Common to IE6 and IE7*height: 100px; For example:

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

* html #example { height:300px; } /* IE7 */

The following method is relatively simple

A few examples:

1. IE6 - IE7 FF

#example {

height:100px; /* FF IE7 */

_height:200px; /* IE6 */

}
In fact, this uses the first method mentioned above You can also
#example {
height:100px !important; /* FF IE7 */
height:200px; /* IE6 */
}

2. IE6 IE7 - FF

#example {

height:100px; /* FF */

*height:200px; /* IE6 IE7 */

}

3. IE6 FF - IE7

#example {

height:100px; /* IE6 FF */

* height:200px; /* IE7 */

}

4. IE6 IE7 FF is different

#example {

height:100px; /* FF */

_height:200px; /* IE6 */

* height:300px; /* IE7 * /
}
or:
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

It should be noted that the order of the codes must not be reversed, otherwise all previous efforts will be wasted. Because when the browser interprets the program, if the name is the same, it will overwrite the previous one with the later one, just like assigning a value to a variable, so we put the general ones in the front, and the more specialized ones, the later

Explain the code of 4:

When reading the code, the first line height: 100px; is common to everyone, IE6 IE7 FF all displays 100px

When it comes to the second line *height: 300px; FF does not recognize this attribute, IE6 and IE7 recognize it, so FF still displays 100px, but IE6 and IE7 overwrite the height attribute obtained in the first line, and both display 300px

When it comes to the third line, _height:200px; only IE6 recognizes it, so IE6 It overwrites the height obtained in the second line, and finally displays 200px

In this way, the three browsers have their own height attribute, let each play with it

If you don’t understand yet , either you go to hit the wall, or I go! But it’s better for you to go.

Oh, I almost forgot to mention:

* To be compatible with IE7, html must have the following statement at the top of the HTML:

〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"　"http://www.w3.org/TR/html4/loose.dtd"〉

3. Use IE-specific conditional comments

〈!- -Other browsers--〉

〈link rel="stylesheet" type="text/css" href="css.css?1.1.9" /〉

〈!-- [if IE 7]〉

〈!-- Suitable for IE7 --〉

〈link rel="stylesheet" type="text/css" href="ie7.css?1.1 .9" /〉

〈![endif]--〉

〈!--[if lte IE 6]〉

〈!-- Suitable for IE6 and The following--〉

〈link rel="stylesheet" type="text/css" href="ie.css?1.1.9" /〉

〈![endif]-- 〉

It seems that I need to compile three sets of css. I haven’t used it yet. I’ll paste it over first.

IE’s if condition Hack

1. 〈!--[if !IE]〉〈!--〉 Recognized by all except IE〈!--〈![endif]--〉
2. 〈!--[if IE ]〉 All IE can recognize 〈![endif]--〉
3. 〈!--[if IE 5.0]〉 Only IE5.0 can recognize 〈![endif]--〉
4. 〈 !--[if IE 5]〉 Only IE5.0 and IE5.5 can recognize 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0 and IE5.0 All the above versions can recognize 〈![endif]--〉
6. 〈!--[if IE 6]〉 Only IE6 can recognize 〈![endif]--〉
7. 〈!--[ if lt IE 6]〉 IE6 and below versions can recognize 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6 and above versions can recognize 〈![endif]- -〉
9. 〈!--[if IE 7]〉 Only IE7 can recognize 〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7 and versions below Recognizable〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7 and above can recognize〈![endif]--〉 Note: gt = Great Then is greater than
〉 = 〉 greater than sign
lt = Less Then less than
〈 = 〈 less than sign
gte = Great Then or Equal greater than or equal to
lte = Less Then or Equal less than or equal to

4. The css filter method (according to the author, it was translated from a classic foreign website)

Create a new css style as follows:

#item {

width: 200px;

height: 200px;

background: red;

}

Create a new p and use the previously defined css style:

〈p 〉some text here〈/p〉

Add the lang attribute here in the body representation, Chinese is zh:

〈body lang="en"〉

Now define another style for the p element:

*:lang(en) #item{

background:green !important;

}

This is done to overwrite the original css style with !important. Since the :lang selector is not supported by ie7.0, it will not have any effect on this sentence, so the same effect under ie6.0 is achieved. , but unfortunately, Safari also does not support this attribute, so you need to add the following css style:

#item:empty {

background: green !important

}

: The empty selector is a CSS3 specification. Although Safari does not support this specification, this element will still be selected. Regardless of whether this element exists, the green color will now appear in browsers other than IE versions. superior.

5. FLOAT closing (clearing float)

Web pages displayed misaligned on some browsers are often caused by the use of float instead of actual closing, which is why p cannot One reason for adaptive height. If the parent p is not set to float but its child p is set to float, the parent p cannot wrap the entire child DIV. This situation generally occurs when a parent DIV contains multiple child DIVs. Solution:
1. Set float to the parent DIV (don’t scold me, I know it’s nonsense)

2. Add an empty DIV after all child DIVs (not recommended, some browsers You can see the gap created by the empty DIV)

For example:

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2 {float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

〈p class="parent" 〉
〈p class="son1"〉〈/p〉
〈p class="son2"〉〈/p〉
〈p class="clear"〉〈/p〉
〈 /p〉

3. Universal float closure

Add the following code to Global CSS, and add class="clearfix" to the p that needs to be closed. It works every time.
Code:
〈style〉
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear :both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix { display:block;}
/* End hide from IE Mac */
/* end of clearfix */
〈/style〉

:after (pseudo object), set in the object The content that occurs after is usually used in conjunction 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 is the most troublesome.

4. overflow:auto (I just saw this, highly recommended)

Just add overflow:auto to the CSS of the parent DIV and you’re done.

Example:

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

〈p class="parent"〉
〈p class="son1"〉〈/p〉
〈p class="son2"〉〈/p〉
〈/p〉

The author’s original words: The principle is that the reason why peripheral elements cannot be extended well is the overflow, because the overflow is invisible (see W3C’s explanation). Now, as long as you add an "overflow:auto" to the peripheral element, the problem can be solved. The result is that except for IE, it can really be solved. The next step is to solve the IE problem. Add "_height:1%" and the problem will be completely solved.

I tried it, and it actually works in IE without adding "_height:1%", so just leave it as it is.

6. Some compatibility details that need to be noted

1. Setting padding on p under FF will cause the width and height to increase (actual width of DIV = DIV wide padding), but IE will not .

Solution: Set two widths of IE and FF for DIV, and add the IE-specific mark "*" before the width of IE.
2. Page centering problem.

body {TEXT-ALIGN: center;} is enough under IE, but it fails under FF.

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

3. Sometimes we see some strange gaps on IE6, but we are highly aware of it. That’s it.

Solution: Try adding "font-size:0px;" to the DIV with a gap.

4, Regarding the hand cursor. cursor: pointer. And hand only applies to IE.

5, double distance generated by floating IE6

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
In this case, IE6 will generate a distance of 200px

Solution: add display:inline to ignore floating elements

Here we will explain in detail the two elements block and inline, and the Block element The characteristics of the Inline element are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block elements); the characteristics of the Inline element are: it is on the same line as other elements, and... cannot be controlled (inline elements) ;
min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be less than a certain width, so as to ensure that the layout 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 min. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important.

Solution: In order to make this command work on IE, you can put a

under the

tag, and then specify a class for p: Then the CSS is designed like this:

#container{

min-width: 600px;

width:e­xpression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
First A min-width is normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7. Padding and margin of UL and FORM tags

UL tag has padding value by default in FF, but only margin has value by default in IE. The FORM tag in IE will automatically margin some margins, while in FF the margin is 0;

Solution: First use this style ul in css, form{margin:0;padding: 0;} Once it’s defined, you won’t have this headache later.

8, DIV floating IE text produces a 3-pixel bug

The following paragraph is what I pasted on the Internet The left object of

is floated, and the right side is positioned using the left margin of the outer patch. The text within the right object will be 3px away from the left.

#box{

float:left;

width:800px;}

#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//This sentence is the key
}
HTML code
〈DIV id=box〉
〈DIV id=left〉〈 /DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉

Regarding the above code, here is my understanding:

First . As long as right defines the width attribute, it will definitely be displayed in two lines under FF

Second, if both widths are defined as percentages, even if they are both 100%, they will be displayed in one line under IE. Therefore, the so-called "this sentence is the key" above is completely useless. It is still on the same line without adding it, unless your width is defined as a numerical value.

So the above code is actually of little use, at least not under FF. In fact, as long as you only define the width of left, it will be successful in IE or FF without defining the width of right. However, in this case, the parent DIV BOX does not really contain the two child DIVs LEFT and RIGHT. You can use the first method I mentioned above. 5 ways to solve it. The simplest way is to add float:left to RIGHT and that's it. It's really annoying!

9, truncation ellipsis

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
This is overflowing After the length is set, the excess text will be cut off automatically and end with an ellipsis. Technology is good technology, and many people like to use it randomly, but please note that Firefox does not support it.