Differences in CSS style sheets between browsers Firefox and IE-CSS Tutorial-php.cn

Differences in CSS style sheets between browsers Firefox and IE

黄舟

Release： 2016-12-14 15:37:23

Original

1033 people have browsed it

1 Css style for Firefox ie6 IE7

Nowadays most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 which is to use "*+Html". Now browse it with IE7 and there should be no problem.

Now you can write a CSS like this:

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

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

2 Centering problem in css layout

The main style definition is as follows:

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

Description:

First define TEXT-ALIGN: center in the parent element; this means that the content in the parent element is centered; this setting is enough for IE.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when defining the child element. It should be noted that if you want to use this method to center the entire page, it is recommended not to use it. In a DIV, you can split multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of the box model. important

use using using using through using ’ ’s ’ through out using ’ through ‐ ‐ ‐ ‐ out out through out out out out out out out out Through Out Through outolece out Through together to Th through ’ through ’ through-the-a-w-www ’ to ff ff

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}

Let’s talk about block in detail, There are two inline elements. The characteristic of the Block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the Inline element is that it is on the same line as other elements. ...Uncontrollable (embedded elements);

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of being arranged in the same row diplay:table;

5 Problems with IE and width and height

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. To solve this problem, you can do this:

#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 very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a

under the tag, and then specify a class for the div:

Then the CSS is designed like this:

#container{

min-width : 600px;

width:e JavaScript, which is only recognized by IE, will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7 Clear Floating h.hackbox {

Display: Table;

// Display the object as a block of elements}}} or

.hackbox {

clear: both;

}

or add: afterr (Pseudo object), set the content that occurs after the object, 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

......#box:after{
content: ".";

display: block;

height: 0;
clear: both;
visibility: hidden;
}

8 DIV floating IE text produces a 3-pixel bug

The object on the left is floating, and the right is positioned using the left margin of the outer patch. The text in the object on the right will have a 3px spacing 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>

9 attribute selector (this is not compatible, it is a bug in hiding css)

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

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

This is hidden for IE6.0 and versions below. FF and OPera function

There is still a difference between attribute selector and sub-selector. The scope of sub-selector is reduced in form. , the scope of the attribute selector is relatively large, such as p[id], all p tags with ids are of the same style.

10 IE hide-and-seek problem

When the div application is complex, there are Some links, DIVs, etc. are prone to hide-and-seek problems at this time.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

11 Height incompatibility

Height incompatibility means that when the height of the inner object changes, the height of the outer layer cannot be automatically adjusted, especially when the inner object uses
margin or paddign. Example:

Content in the p object

CSS:

#box {background-color:#eee } :0px;overflow:hidden;} Or add the border attribute to the DIV.

For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!