CSS perfectly compatible with IE6/IE7/FF's universal approach

CSS perfectly compatible with IE6/IE7/FF's universal approach

First, CSS HACK
The following two methods can solve almost all of today's hack.

1,!important

With IE7 support for!important, the!important method is now only for IE6 hack. (Note the wording. Remember that the statement location needs to be advanced.)

Wrapper

{
Width:100px!important; /* IE7+FF/
width:80px; /IE6 */
}

2, Ie6/ie77 to Firefox

+html and *html is the unique label of IE, Firefox is not supported. And +html is a special label for IE7.

Wrapper

{

wrapper {width:120px;}/* FireFox */

HTML #wrapper {width:80px;}/IE6 Fixed/
*+html #wrapper {width:60px;}/IE7 fixed, note order */
}

Attention:
*+html to IE7 hack must ensure that the HTML top has the following declaration: "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
Second, Universal float closed

The principle of clear float can be found in [how to clear floats without Structural Markup]
Add the following code to the global CSS and add class= "Clearfix" to the div that needs to be closed.

. 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 */
Third, other compatibility skills

1, FF setting padding after the div will cause width and height to increase, but IE will not. (Can be resolved with!important)
2, centering problem.
1). Center vertically. Set Line-height to the same height as the current Div, and then through Vertical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. margin:0 Auto; (of course not everything)
3, if you need to give the contents of a tag style, you need to set display:block; (common in navigation labels)
4, the FF and IE to the BOX understanding of the difference caused by 2px is also set to float div under IE margin doubled and so on.
5, UL label under FF The default is List-style and padding. It is advisable to declare beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents)
6, as an external wrapper div do not set dead height, it is best to add Overflow:hidden. To achieve a high degree of self-adaptation.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.

1 CSS styles for Firefox IE6 IE7
Most are now using!important to hack, for IE6 and Firefox test can display normally,
But IE7 to!important can be correctly explained, will cause the page did not display as required! Find a needle
IE7 good hack Way is to use "*+html", now with IE7 browsing, there should be no problem.
Now write a CSS that can do this:

1 {color: #333;}/* Moz */

• HTML #1 {color: #666;}/* IE6/
  *+html #1 {color: #999;}/IE7 */
  Then under Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999.

2 centering issues in CSS layouts
The main style definitions are as follows:

body {text-align:center;}

Center {margin-right:auto; Margin-left:auto; }

Description
The text-align:center is defined first in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available.
But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; ”
It is necessary to note that if you want to use this method to center the entire page, it is recommended that you do not put in a div, you can sequentially split a number of Div,
Just define the Margin-right:auto in each of the split div; Margin-left:auto; You can do it.

3 box models different interpretations

box{width:600px;//for ie6.0-w\idth:500px;//for ff+ie6.0}

box{width:600px!important//for ff width:600px;//for ff+ie6.0 width/**/:500px;//for ie6.0-}

4 The double distance generated by the floating IE

box{float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}

Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element);

box{Display:block;//can simulate a block element for inline elements display:inline;//Achieve the effect of the same row arrangement diplay:table;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This is a big problem, if you only use width and height,
In the normal browser these two values will not change, if only with min-width and min-height words, ie below is basically not set width and height.
For example, to set the background image, this width is more important. To solve this problem, you can:

box{width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}

6 minimum width of the page

Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE does not recognize this,
And it actually puts width as the minimum width. In order to make this command available on IE, you can put a

Put it under the label and specify a class for the DIV:
Then the CSS is designed like this:

container{min-width:600px width:expression (Document.body.clientWidth < 600?) "600px": "Auto");}

The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.

7 Clear Float

. hackbox{display:table;//Display the object as a block-element-level table} or. hackbox{Clear:both;}
or join: After (pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support,
So it doesn't affect the Ie/win browser. This is the most troublesome of ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}

8 div Floating IE text generates 3 pixel bug

The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 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

9 attribute Selector (this is not compatible, is a bug to hide CSS)

p[id]{}div[id]{}
This is hidden for IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, the range of the child selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.

Ten IE hide and seek problems

When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.
Some content does not show up when the mouse selects this area is found content is indeed on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

11 Height not adapted

Height is not adjusted when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner layer object uses
Margin or paddign.
Cases:

The contents of the P object

CSS: #box {}

Box p {margin-top:20px;margin-bottom:20px; text-align:center;}

Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

Vi. CSS Compatibility essentials analysis IE vs FF

CSS Compatibility essentials:

DOCTYPE affecting CSS Processing

Ff:div set Margin-left, Margin-right is auto when the center, IE No

Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important

FF: Support!important, IE is ignored, can be used!important to set the FF special style

Vertical center of DIV problem: vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line

Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can

FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee not to break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the MenuBar xhtml+css compatibility solution small Set

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or the idea is not clear, I first put some of the problems I encountered in the following, the province of everyone looking around ^ ^

1, in Mozilla Firefox and IE in the box model interpretation inconsistent lead to 2px resolution method:

div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

2, IE5 and IE6 box interpretation inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

, about this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）

3, the UL tag in Mozilla default is padding value, and in IE only margin has value so define first

ul{margin:0;padding:0;}

Will solve most of the problems.

4, about the script, in xhtml1.1 does not support the language attribute, only need to change the code to

< type= "Text/java" >

You can do it.

Seven, 10 css tricks you don't necessarily know

1. CSS font attributes shorthand rules

The general use of CSS to set font properties is to do this:

Font-weight:bold;

Font-style:italic;

Font-varient:small-caps;

Font-size:1em;

Line-height:1.5em;

Font-family:verdana,sans-serif;

But you can also write them all in one line:

Font:bold Italic small-caps 1em/1.5em Verdana,sans-serif;

That's great! There is only one point to be reminded: this shorthand method only works if you specify both the Font-size and Font-family properties. Also, if you do not set Font-weight, Font-style, and font-varient, they will use the default values, which should be remembered.

2. Use two classes at a time

Typically you can only set a class for one element, but that doesn't mean you can't use two of them. In fact, you can do this:

...

The P element is also given two classes, the middle is opened with an empty space, so that all text and side two class attributes will be added to the P element. If there are conflicting attributes in their two classes, the latter setting works, that is, the properties of the class that are placed in the CSS file are in effect.

Add: For an ID, this cannot be written

...

I can't write that.

3, the default value of CSS border

You can usually set the color, width and style of the boundary, such as:

BORDER:3PX Solid #000

This shows the border as 3 pixels wide, black, solid line. But in fact, you just need to specify the style.

If only the style is specified, the default values are used by the other properties. Generally, the border width defaults to medium, typically 3 to 4 pixels, and the default color is the color of the text in it. If the value is just right, you don't have to set that much.

4. CSS for document printing

Many web sites have a print-ready version, but this is not really necessary because you can use CSS to set the print style.

That is, you can specify two CSS files for the page, one for the screen display, and one for printing:

Line 1th is the display, line 2nd is print, note the media properties.

But what should I write in the printed CSS? You can set it up by designing a common CSS method. At the same time, the CSS can be set to display CSS to check its effect. Perhaps you will use the Display:none command to turn off some decorative pictures, and then turn off some of the navigation buttons. To learn more, you can look at the "Print differences" article.

5, Picture replacement skills

It is generally recommended that you display text in standard HTML instead of using a picture, which is faster and more readable. But if you want to use some special fonts, you can only use pictures.

For example, you want the entire sale of the icon, you use this picture:

Of course, but for search engines, compared to normal text, they have little interest in alt text, because many designers here put a lot of keywords to cheat search engines. So the method should be this:

Buy Widgets

But then there is no special font. To achieve the same effect, you can design css like this:

H1 {Background:url (/blog/widget-image.gif) no-repeat; height:image height text-indent: -2000px}

Be careful to change the image height to the true picture. Here, the picture will be shown as the background, and the real text because of the set-2000 pixels of this indentation, they will appear on the left side of the screen 2000 points, it is not visible. But this is for the person who closes the picture, may not see all, this should pay attention to.

6. Another adjustment technique for CSS box model

The box model is mostly tuned for IE before IE6, which calculates the width of the boundary and the space between the elements. Like what:

box {width:100px; border:5px; padding:20px}

Call it this way:

...

At this point the full width of the box should be 150 points, which is correct on all browsers except for the IE browser before IE6. But on a browser like IE5, its full width is still 100 points. This difference can be handled using the box adjustment method previously invented by people.

But using CSS can also achieve the same goal, so that they show the same effect.

box {width:150px} #box div {border:5px; padding:20px}

This is called:

...

In this way, no matter what browser, the width is 150 points.

7, block Element Center alignment

If you want to make a fixed-width page and want the page to be centered horizontally, this is usually the case:

content {width:700px; margin:0 auto}

You will use

To surround all the elements. This is simple, but not good enough, IE6 the previous version will not show this effect. Change the CSS as follows:

Body {Text-align:center} #content {text-align:left; width:700px; margin:0 Auto}

This will center the contents of the page, so in the content is added

Text-align:left.

8. Use CSS to handle vertical alignment

The Vertical alignment table can be easily implemented, and the table cell Vertical-align:middle can be set. But it doesn't work for CSS. Setting this property is useless if you want to set a navigation bar that is 2em high and you want the navigation text to be centered vertically.

What is a CSS method? By the 2EM:LINE-HEIGHT:2EM, you can set the line height of these words to be the same.

9, CSS positioning within the container

One of the benefits of CSS is that you can position an element arbitrarily, within a container. For example, for this container:

container {position:relative}

This allows all elements in the container to be positioned relative to each other so that they can be used:

...

If you want to position to the left 30 points, 5 points above, you can:

navigation {position:absolute; left:30px; top:5px}

Of course, you can also:

margin:5px 0 0 30px

Note that the order of 4 numbers is: top, right, bottom, left. Of course, it is sometimes better to locate the method rather than the margin.

10, straight to the bottom of the screen background color

In the vertical direction is the control is not the CSS. If you want the navigation bar and the content bar to pass directly to the bottom of the page, it is convenient to use the table, but if you only use CSS like this:

navigation {background:blue; width:150px}

A shorter navigation bar won't pass through to the bottom, and it will end when the content ends. What should we do?

Unfortunately, you can only use deception, give the shorter column a background, width and column width, and let its color and set the background color.

Body {background:url (/blog/blue-image.gif) 0 0 Repeat-y}

Do not use EM at this time, because then, once the reader changes the font size, the trick will be revealed, only use PX.

1. Ultimate Method: Conditional annotation

The disadvantage is that an additional number of HTTP requests may be added under IE browser.

2, CSS selector distinguish

IE6 does not support child selectors; Use the general declaration CSS selector for IE6 first, and then use the sub-selectors for ie7+ and other browsers.

/* IE6 Dedicated */

. content {color:red;}

/* Other browsers */

Div>p. Content {Color:blue;}--
3, PNG translucent picture problem

Although it can be solved by means of JS, but still there are loading speed problems, so, this design can avoid or try to avoid as well. To achieve maximum website optimization.

4. Rounded corners under IE6

IE6 does not support CSS3 fillet properties, the most cost-effective solution is to use the picture fillet to replace, or give up the IE6 fillet.

5. IE6 background Flashing

If you give the link, the button with CSS sprites as the background, you may find that the background image flashes under IE6. This is due to the fact that IE6 does not cache the background map, it reloads every time the hover is triggered, and the images can be cached with JavaScript settings IE6:

Document.execcommand ("Backgroundimagecache", false,true);
6, the minimum height

IE6 does not support the Min-height property, but it thinks height is the minimum height. WORKAROUND: Use an attribute!important that is not supported by IE6 but supported by the remaining browsers.

container {min-height:200px; Height:auto!important; height:200px;}

7. Maximum Height

Use ID directly to change the maximum height of an element
var container = document.getElementById (' container ');
Container.style.height = (Container.scrollheight > 199)? "200px": "Auto";

Write a function to run
function Setmaxheight (elementid, height) {
var container = document.getElementById (ElementID);
Container.style.height = (Container.scrollheight > (height-1))? Height + "px": "Auto";
}

function Example
Setmaxheight (' Container1 ', 200);
Setmaxheight (' Container2 ', 500);
8, 100% height

Under IE6, if you want to define a 100% height for an element, you must explicitly define the height of its parent element, and if you need to define a full screen height for the element, you have to define the height:100% for the HTML and body first.

9. Minimum width

Like Max-height and Max-width, IE6 also does not support min-width.

Use ID directly to change the minimum width of an element
var container = document.getElementById (' container ');
Container.style.width = (Container.clientwidth < width)? "500px": "Auto";

Write a function to run
function Setminwidth (elementid, width) {
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth < width)? width + "px": "Auto";
}

function Example
Setminwidth (' Container1 ', 200);
Setminwidth (' Container2 ', 500);
10, the maximum width

Use ID directly to change the maximum width of an element
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";

Write a function to run
function Setmaxwidth (elementid, width) {
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";
}

function Example
Setmaxwidth (' Container1 ', 200);
Setmaxwidth (' Container2 ', 500);
11, bilateral distance bug

When the element floats, the IE6 will incorrectly double the margin value of the floating direction. A better solution for individuals is to avoid the use of float and margin simultaneously.

12. Clear Floating

If you want to wrap a floating element with a div (or other container), you will find that the DIV (container) must have a defined height, width, and a property in the overflow (except the auto value) to wrap the floating element tightly.

container {border:1px solid #333; overflow:auto; height:100%;}

floated1 {float:left; height:300px; width:200px; background: #00F;}

floated2 {float:right; height:400px; width:200px; background: #F0F;}

MORE: http://www.twinsenliang.net/skill/20090413.html

13, floating layer dislocation

When content exceeds the width defined by the outsourced container, the container ignores the defined width value in IE6, and the width increases incorrectly as the content width grows.

Floating layer dislocation problem in IE6 there is no real satisfactory solution, although you can use Overflow:hidden, or overflow:scroll; to fix, but hidden easily lead to some other problems, scroll will destroy the design JavaScript is not a good solution to this problem. Therefore, it is advisable to avoid this problem on the layout, using a fixed layout or controlling the width of the content (to add width to the inner layer).

14, hide and Seek bug

In IE6 and IE7, hide-and-seek bugs are a very annoying problem. A floating element that breaks the container, if there is no floating content after him, and there are some definitions: hover links, when the mouse moved to those links, the IE6 will trigger hide and seek.

The workaround is simple:
1. After (the non-floating) content, add a
2. Triggering the haslayout of the container containing the links, a simple method is to define the height:1%;

15.1 pixel spacing bug for absolutely positioned elements

The error under IE6 is due to a carry processing error (IE7 has been fixed), and bottom and right produce an error when the parent element of an absolutely positioned element is either high or wide odd. The only solution is to define a clear high-wide value for the parent element, but there is no perfect solution for liquid layout.

16, 3 pixel pitch bug

In IE6, when the text (or no floating element) is followed by a floating element, there is a 3-pixel interval between the text and the floating element.
Add display:inline and -3px negative margin to a floating layer
Define margin-right for the intermediate content layer to correct -3px

17, ie under the z-index of the bug

In IE, the z-index level of the anchored element is relative to the respective parent container, which causes the z-index to behave incorrectly. The workaround is to define the Z-index for its parent element and, in some cases, to define position:relative.

18. Overflow Bug

In IE6/7, overflow cannot correctly hide a child element with relative positioning position:relative. The solution is to outsource the container. Wrap plus position:relative;.

19. Horizontal List width bug

If you use the Float:left;

Horizontally arranged, and

The haslayout is triggered by the (or other) contained within the IE6, and there is a false performance under the The solution is simple, just need to define the same float:left;

20. List Ladder Bug

List ladder bugs are usually given in the

The child elements

CSS perfectly compatible with IE6/IE7/FF's universal approach