CSS styles compatible with different browser problem solving methods

In the design of the website, should pay attention to CSS style compatible with different browser issues, especially for the full use of the div CSS design site, you should pay more attention to the IE6 IE7 ff CSS style compatibility , otherwise, you may go out of the network chaos do not want to appear the effect!

All browsers universal height:100px; IE6 Special _height:100px; IE6 Special *height:100px; IE7 Special *+height:100px; IE7, FF shared with height:100px!important;

First, CSS 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.)

The following is the referenced content:

2, Ie6/ie7 to Firefox

The following is a reference to the content: *+html and *html are specific to the Internet Explorer tag, Firefox temporarily does not support. And *+html is a special label for IE7 .

Note: *+html's hack to IE7 must ensure that the HTML top has the following declaration:

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, the need to close the div plus class= "clearfix", repeated Try to be uncomfortable.

The following is the referenced content:

Third, other compatibility skills

1, FF setting padding after the div will cause width and height to increase, but IE will not. (available!important solution) such as width:115px!important;width:120px;padding:5px;

The

must be aware that, !important;  must be in front.  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; 3, if you need to add style to the contents of the a tag, it is necessary to set display:block (common in Navigation label) 4, the difference between FF and IE on BOX understanding results in 2px difference and the div set to float is in IE The issue of double margin. 5, UL label under FF the List-style and padding are the default. 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 kill height, preferably plus overflow:hidden. To achieve a highly adaptive. 7, about the hand cursor. Cursor:pointer. And hand only applies to IE.

Compatible code: Compatible with the most recommended modes.  .submitbutton { float:left; width:40px; height:57px; margin-top:24px;  Margin-right:12px; } *html. Submitbutton { margin-top:21px; } *+html. Submitbutton {  margin-top:21px; }  What is browser compatible: When we use a different browser (Firefox IE7 IE6) to access the same site, or page, there will be some incompatibility problems, some show normal, Some of the display is not normal, we will be very annoyed when writing CSS, just fixed the browser problem, the result of another browser has a new problem. And compatibility is a way to allow you to write independently in a CSS to support different browser styles. This is a harmonious situation. Oh!   recently Microsoft released IE7 browser compatibility does add a heavy burden to some web developers, although IE7 has been standardized, but there are many different from FF, so need to use IE7 compatibility. A bit of logical thinking people will know can be used with the compatibility of IE and FF, the following describes three compatible, for example: (For beginners, hehe, the master is here passing it.)   Program code   first compatible, IE FF all browsers are public (not really compatible)  height:100px;  second compatible IE6 exclusive  _height:100px;  third compatible IE6 IE7 Public  *height:100px;  Introduction After these three compatible, let's look at how to give an attribute definition in a style IE6 IE7 FF-specific compatibility, see the following code, the order can not be wrong oh:  program code  height:100px; *height:120px; _height:150px;  below I briefly explain how each browser understands these three properties:  under FF, 2nd, 3 Properties FF does not know, so it reads height:100px;  under IE7, the third property IE7 not know, so it reads 1th, 2 properties, and because the second property overrides the first property, theThe final read by IE7 is the 2nd attribute *height:120px;  in IE6, three properties IE6 are recognized, so three properties can be read, and because the third property overrides the first 2 properties, so IE6 finally read the third attribute.  

1 for Firefox IE6 IE7 CSS style is now mostly used!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be interpreted correctly, will cause the page does not appear as required! Find a good IE7 for the hack Way is to use "*+html", now with IE7 browsing, there should be no problem. Now write a CSS that can do this:

The following is the referenced content: #1 {color: #333;} * HTML #1 {color: #666;} *+html #1 {color: #999;}

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 problems in CSS layouts The main styles are defined as follows:

body {text-align:center;} #center {Margin-right:auto; Margin-left:auto; Description: First defines the text-align:center 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; "What needs to be explained is that if you want to use this method to make the whole page to center, it is recommended not to set in a div, you can sequentially split multiple div, as long as in each split div defined margin-right:auto; 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+ie 6.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's a bit of block,inline two elements, the block element is characterized by: always start on new lines, height, width, row height, margin can be controlled (block element); The inline element is characterized by the same line as the other elements,... Uncontrollable (inline element);

#box {display:block;//can simulate a block element display:inline for inline elements;//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 problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is 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 doesn't 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 then assign a class to the div: then the CSS is designed like this: #container {min-width:600px; Width:expression_r (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 does not 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 for IE6.0 and IE6.0 the following versions are hidden, FF and Opera action attribute selector and sub-selectors are still different, the range of the sub-selector is reduced from the form, the range of the property selector is larger, such as P[id], 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 suitable for height adaptation is the outer height cannot be automatically adjusted when the height of the inner object changes, especially when the inner 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.   Block IE browser (ie not shown)  *:lang (zh) select {font:12px!important;}  select:empty {font:12px!important;}   Here Select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.   Only IE7 identify  *+html {...}   This compatibility can be used when faced with the need to do a style only for IE7.  ie6 and IE6 below identify  * HTML {...}   This place to pay special attention to a lot of landlords have written is IE6 compatibility actually ie5.x can also recognize this compatibility. Other browsers are not recognized.  html >body Select {...}   This sentence has the same effect as the previous sentence.   Only IE6 does not recognize  select {Display:none;}   Here is mainly through the CSS comments to separate a property and value, flow in front of the colon.   Only IE6 and IE5 do not recognize  select {Display:none;}   Here, unlike the above sentence, there is a CSS comment between the selector and the curly brace.   Only IE5 does not recognize  select {Display:none;}   This sentence removes the comment from the attribute area in the previous sentence. Only IE5 does not recognize the   box model solution &NBSP;SELCT {width:ie5.x width; voice-family: ""} ""; Voice-family:inherit; Width: correct widths;} The cleaning method of the   box model is not handled by!important. This should be clear.   Clear Floating  select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}   in Firefox, when the children are floating, then the height of the parent can not completely wrap the entire child, then use this clear floating compatibility to do a definition of the parent, then you can solve the problem.   truncated ellipsis  select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden;}   This is the more out of the length of the self-cut off the portion of the text, and end with an ellipsis, a very good technology. Only Firefox does not support it at this time.   Only opera recognition   @media all and (min-width:0px) {select {...}}   Do a separate setting for Opera browser.   above are written in CSS some compatibility, it is recommended to follow the correct tag nesting (div ul li nested structure relationship), so that you can reduce the use of compatible frequency, do not enter the understanding of misunderstanding, not a page requires a lot of compatibility to maintain multi-browser compatibility, In many cases, perhaps a compatibility does not also allow the browser to work very well, these are used to solve the local compatibility problem, if you want to separate the compatibility of the content, may wish to try the following several filters. Some of these filters are written in CSS to import special styles through filters, as well as the use of conditions to link or import the required patch styles in HTML.  ie5.x filter, only ie5.x visible   @media TTY { i{content: "";}} @import ' Ie5win.css '; &NBSP;IE5/MAC filter, generally do not need   The following is the conditional comment of IE, the individual feel that using conditional comments to call the corresponding compatibility is a more perfect multi-browser compatible solution. The need to be compatible with the place in a file, when the browser version can be used to invoke the compatible style, which is not only very convenient to use, and for the production of this CSS itself, can be more strictly observed whether it is necessary to use compatibility, in many cases, When I myself write CSS if all the code including compatibility are written to a CSS file when the time will be very casual, how to be compatible with how to be compatible, and you write independently, you will not consciously consider whether it is necessary to be compatible, is first compatible with CSS? Or do you want to adjust the contents of the main CSS to as much as possible without the need for compatibility? Do you have a sense of accomplishment when you make a lot of browsers very good and obedient with very little compatibility? You know how to choose.Ah ~ ~ Hehe  ie If conditions compatible with their own can be flexible use see this IE conditional comment  only ie  all IE recognizable   only IE5.0 can identify  only ie 5.0+  IE5.0 shifting IE5.5 can be identified   only IE6 recognizable  only ie 7/- ie6 and IE6 ie5.x below can be identified  only ie 7/-  only IE7 recognizable  css There are many things do not follow certain rules, it will make you very upset, although you can through a lot of compatibility, a lot of!important to control it, but you will find that in the long-range you will be very reluctant to look at many excellent sites, their CSS let Ie6,ie7,firefox, Even Safari,opera run up perfect is not envy? And their seemingly complex template under the use of less compatible. In fact, you need to know that IE and Firefox is not not so discordant, we find a certain way, is fully able to let them coexist harmoniously. Don't you think found a compatible approach, you have mastered everything, we are not compatible slaves.  div ul Li nesting order   speak only one rule today. It is

Triangular relationship. My experience is that

On the outermost, inside is

, but not

, you will find that your gap is very difficult to control, in general, IE6 and IE7 will be a little more space. But in a lot of cases you came to the next line, the gap is gone, but the front of the content is empty a large piece, this situation although you can change the margin of IE, and then adjust the padding in Firefox, so that the two show the effect is very similar, but you have to the CSS will become smelly long, You have to think more about the possible remedies for this problem, although you know that it's compatible with them, but you're going to get bored.

Specific nested notation

Follow the nested way above, and then inside the CSS to tell ul {margin:0px; Padding:0px;list-style:none;}, where List-style:none is not allowed

Mark the front of the tag to show a dot or a number of directory types such as tags, because IE and Firefox show that the default effect is somewhat different. So do not need to do any hands and feet, your IE6, and IE7, Firefox display of Things (outer space, spacing, height, width) Almost no difference, perhaps careful you will be in a moment to find: two pixels difference, but that is very perfect, You do not need to adjust the large-sized CSS to control their display, you are willing, you can only be compatible with one or two places, and usually this compatibility can adapt to a variety of places, do not need you to repeat in different places to debug different compatibility methods-alleviate your annoyance. You can Ul.class1, Ul.class2, UL.CLASS3 {xxx:xxxx} in a convenient way to sort out where you want to be compatible, and unified compatible. Try it, no more nesting, although in the div+css way you can almost think how to nest nested how to nest, but according to the above rules you will be a lot easier, so much more!

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 do not understand, only know IE5 and Firefox are supported 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 be able to 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:

The following is the quoted content: 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.

, and then again is

Of course

And it can be nested inside.

What, but it is not recommended that you nest a lot of things. When you meet such rules, those unlucky, disobedient gaps will not appear in the inside, when you are just

Put it inside.

CSS styles compatible with different browser problem solving methods