Css multi-browsing FAQ and css browsing FAQ

Css multi-browsing FAQ and css browsing FAQ

CSS compatibility with various browsers has become a common issue, and Web tutorials are everywhere.
The following content is not too novel and is purely personal summary. I hope it will be helpful to beginners.
I. CSS HACK
The following two methods can solve almost all today's HACK.

1 ,! Important

With IE7! Important Support ,! The important method is only applicable to the HACK of IE6.
(Note the writing method. Remember to advance the declaration position .)
<Style>
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>

2, IE6/IE77 for FireFox

* + Html and * html are unique tags of IE, which are not supported by firefox at the moment. * + html is also a unique tag of IE7.
<Style>
# Wrapper
{
# Wrapper {width: 120px;}/* FireFox */
* Html # wrapper {width: 80px;}/* ie6 fixed */
* + Html # wrapper {width: 60px;}/* ie7 fixed, pay attention to the Order */
}
</Style>

Note:
* + The html HACK for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
2. Universal float Closure

For details about the principle of clear float, refer To [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS and add class = "clearfix" to the div to be closed.
<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>
Iii. Other compatibility skills

1. Setting padding for div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). vertical center. Set line-height to the same height of the current div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding BOX leads to the 2px difference. There are also issues such as div set to float and margin doubling under ie.
5. ul labels are listed-style and padding by default under FF. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper div. It is best to add overflow: hidden to achieve highly adaptive.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

1. css style for firefox ie6 ie7
Most of them are used now! Important comes to hack. It can be displayed normally for ie6 and firefox tests,
But ie7! Important can be correctly explained, and the page will not be displayed as required! Find a needle
The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.
You can write a CSS file as follows:

#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* IE7 */
The font color in firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

2. center problem in css layout
The main style definition is as follows:

Body {TEXT-ALIGN: center ;}
# Center {MARGIN-RIGHT: auto; MARGIN-LEFT: auto ;}
Note:
First, define TEXT-ALIGN: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.
However, it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto; MARGIN-LEFT: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one DIV. You can split multiple divs in sequence,
You only need to define MARGIN-RIGHT: auto; MARGIN-LEFT: auto; in each split div.

3 different explanations of the Box Model

# 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. Double distance of floating ie

# Box {float: left; width: 100px; margin: 0 0 0 100px; // in this case, IE will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements. The characteristics of the Block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the features of the Inline element are as follows: On the same line as other elements ,... uncontrollable (embedded element );

# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: table;

IE does not recognize the min-definition, but in fact it treats normal width and height as min conditions. In this case, the problem is big. If only the width and height are used,
In a normal browser, these two values will not change. If only min-width and min-height are used, the width and height under IE are not set at all.
For example, to set a background image, the width is 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 page width

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this,
In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:
Then 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment.

7. Clear floating

. Hackbox {display: table; // display the object as a block element-Level table} Or. hackbox {clear: both ;}
Or add: after (pseudo object) to set the content after the object, which is usually used with content. IE does not support this pseudo object, not supported by Ie browsers,
This does not affect IE/WIN browsers. This is the most troublesome ...... # box: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}

8 DIV floating IE text produces 3 pixel bug

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 critical}
HTML code <div id = "box"> <div id = "left"> </div> <div id = "right"> </div>

9 attribute selector (this is incompatible and is a bug in hiding css)

P [id] {} div [id] {}
This is hidden for versions earlier than IE6.0 and IE6.0. It is used by FF and OPera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in p [id, all p tags have IDs in the same style.

10 Internet Explorer

When the div application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page.
Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

11 highly unsuitable

The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses
Margin or paddign.
Example:
<Div id = "box">
<P> content in the p object </p>
</Div>
CSS: # box {background-color: # eee ;}
# Box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Solution: Add two empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.

Vi. CSS compatibility Key Points Analysis IE vs FF

Key Points of CSS compatibility:

DOCTYPE affects CSS Processing

FF: When div sets margin-left and margin-right to auto, it is already centered, and IE is not working.

FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered.

FF: After padding is set, the div will increase the height and width, but IE will not, so we need to use it! Set one more height and width for important.

FF: Yes! Important, IE is ignored, available! Important sets a special style for FF

Vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

Cursor: pointer can display the cursor finger shape in ie ff at the same time, hand only IE Can

FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space XHTML + CSS compatibility solution small set in menubar.

There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write down some of my problems below, search for the province ^

1. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. solution:

Div {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute IE cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

Div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: XXpx! Important;

2. The BOX interpretations of IE5 and IE6 are inconsistent. In IE5, The div {width: 300px; margin: 0 10px 0 10px;} The div width is interpreted as 300px-10px (right filling) -10px (left filled) the final div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes:

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

I don't quite understand what/**/is. I only know that both IE5 and firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

3. ul labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.

Ul {margin: 0; padding: 0 ;}

Most problems can be solved.

4. For scripts, the language attribute is not supported in xhtml1.1. You only need to change the code

<Type = "text/java">

You can.

7. 10 CSS skills you may not know

1. Simplified CSS font attributes

In general, CSS is used to set the font attributes as follows:

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 all of them to one line:

Font: bold italic small-caps 1em/1.5em verdana, sans-serif;

Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted.

2. Use both classes

Generally, only one Class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can:

<P class = "text side">... </p>

At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect.

Supplement: for an ID, neither <p id = "text side">... </p> can be written in this way.

3. Default Value of CSS border

You can usually set the border color, width, and style, such:

Border: 3px solid #000

The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here.

If only the style is specified, the default value is used for other attributes. Generally, the default width of Border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much.

4. CSS for document printing

Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style.

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

<Link type = "text/css" rel = "stylesheet" href = "/blog/stylesheet.css" media = "screen"/> <link type = "text/css" rel = "stylesheet" href = "printstyle.css" media = "print"/>

1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes.

But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use the "display: none" command to turn off some decorative images and then turn off some navigation buttons. For more information, see "Print differences.

5. Image replacement skills

Generally, we recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images.

For example, if you want to use the entire selling icon, you can use this image:

<H1>

This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. The method should be as follows:

<H1> Buy widgets

However, there is no special font. To achieve the same effect, you can design CSS as follows:

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

Change the image height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. However, this may not be visible to anyone who closes the image.

6. Another adjustment technique for the CSS box Model

The Box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example:

# Box {width: 100px; border: 5px; padding: 20px}

Call it like this:

<Div id = "box">... </div>

At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like IE5, its full width is still 100 points. The Box adjustment method invented by the predecessors can be used to deal with this difference.

However, CSS can achieve the same purpose to make them display the same effect.

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

Call this method as follows:

<Div id = "box"> <div>... </div>

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

7. Align block elements in the center

If you want to build a fixed-width webpage and make the webpage horizontally centered, it is usually like this:

# Content {width: 700px; margin: 0 auto}

You will use <div id = "content"> to enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows:

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

This will center the webpage Content, so the Content is added

Text-align: left.

8. Use CSS to process Vertical Alignment

Vertical alignment can be easily implemented using tables. You can set the table unit vertical-align: middle. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically.

What is the CSS method? By the way, set the Row height of the text to 2em: line-height: 2em.

9. Position CSS in the container

One advantage of CSS is that one element can be located at any time in a container. For example, for this container:

# Container {position: relative}

In this way, all elements in the container are relatively located, and can be used as follows:

<Div id = "container"> <div id = "navigation">... </div>

If you want to locate at 30 to the left and 5 to the top, you can do this:

# Navigation {position: absolute; left: 30px; top: 5px}

Of course, you can also do this:

Margin: 5px 0 0 30px

Note that the order of the four numbers is: Top, right, bottom, left. Of course, sometimes the positioning method is better than the margin method.

10. Background Color directed to the bottom of the screen

CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS:

# Navigation {background: blue; width: 150px}

A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do?

Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color.

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

In this case, em cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only px can be used.