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

This article shows you ten tips to help solve CSS compatibility problems, which are concise and easy to understand, which will definitely catch your eyes. I hope you can get something from the details of this article.

Are you familiar with CSS compatibility issues? here are ten tips to help you solve CSS compatibility problems. Due to the different interpretations of CSS in different browsers, IE7 can be displayed normally, but on Firefox, IE6 and other browsers, there are dislocation, sinking and other problems, so you have to switch and debug constantly between Firefox, IE6 and IE7.

Ten super tips to help you solve CSS compatibility problems

Everyone has learned a lot of knowledge and skills about CSS layout in 51cto.com, but the compatibility of CSS styles is not to be underestimated. The problems it leads to often make everyone worried. Due to the different interpretations of CSS in different browsers, IE7 can be displayed normally, but in other browsers such as Firefox, IE6, there are problems such as dislocation and sinking, so we have to constantly switch and debug between Firefox, IE6 and IE7. Recently, two more browsers have joined googleChrome and IE8. It seems hopeless for a browser to dominate the world, and it can only overcome the compatibility problem as much as possible. It is very effective to find an article to solve the compatibility problem. Here are ten super tips to help you solve CSS compatibility problems. When you encounter problems, take a look at them. This article is reproduced from the Internet.

1. Css style for FirefoxIE6IE7

Now most of them use! important to hack, for IE6 and Firefox tests can be displayed normally, but IE7 to! important can be explained correctly, will cause the page not to display as required! To find a good hack method for IE7 is to use "* + html". Now browse it with IE7. There should be no problem. Now you can write a CSS like this:

ExampleSourceCode

# abc {color:#333;} / * Moz*/ * html#abc {color:#666;} / * IE6*/ * + html#abc {color:#999;} / * IE7*/

Then the font color is displayed as # 333 under Firefox, the font color is displayed as # 666 under IE6, and the font color is displayed as # 999 under IE7.

II. The problem of centering in CSS layout

The main style definitions are as follows:

ExampleSourceCode

Body {TEXT-ALIGN:center;} # center {MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}

Note: first of all, the definition of TEXT-ALIGN:center; in the parent element means that the content in the parent element is centered; for IE, this setting is fine. But it cannot be in the middle in mozilla. The solution is to add "MARGIN-RIGHT:auto;MARGIN-LEFT:auto;" when the child element is defined.

It is important to note that if you want to use this method to center the entire page, it is recommended not to be in a DIV, you can remove multiple div in turn, as long as you define MARGIN-RIGHT:auto;MARGIN-LEFT:auto; in each div.

Third, box model

ExampleSourceCode

# box {width:600px; / / forIE6.0-w\ idth:500px; / / forFirefox+IE6.0} # box {widthParse 600pxpackages / / forFirefox width:600px; / / forFirefox+IE6.0 width/**/:500px; / / forIE6.0-}

4. Double distance generated by floating IE6

ExampleSourceCode

# box {float:left;width:100px;margin:000100px; / / in this case the IE will generate the distance display:inline;// of the 200px 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 an embedded element as a block element display:inline;// to achieve the effect of arranging on the same line diplay:table

5. IE and width and height

IE doesn't recognize the definition of min-, but in fact it treats normal width and height as if there were 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. To solve this problem, you can do this:

ExampleSourceCode

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

VI. The 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 doesn't recognize this, and it actually uses width as the minimum width. 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:

ExampleSourceCode

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

9. Property selector (this is not compatible, it is a bug that hides css)

ExampleSourceCode

P [id] {} div [id] {} p [id] {} div [id] {}

This is hidden for versions below IE6.0 and IE6.0, Firefox and OPera functions

There is a difference between attribute selector and sub-selector, the scope of sub-selector is narrowed in terms of form, and the scope of attribute selector is larger, such as p [id], all p tags with id are the same.

The problem of IE playing hide-and-seek

When the div application is complex, there are some links in each column, such as DIV, it is easy to play hide-and-seek. Some of the content cannot be displayed, and when the mouse selects this area, it is found that the content is indeed on the page.

Solution: use the line-height attribute for # layout or use fixed height and width for # layout. The page structure is as simple as possible.

What are the ten tips to help solve CSS compatibility problems? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.