One, for Firefox IE6 IE7 CSS style
Now most are using!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be correctly interpreted, will cause the page did not appear as required! Find a good hack way for IE7 is to use "*+html", now use IE7 to browse, there should be no problem now write a CSS can be this:
Example Source Code
#abc {color: #333;}/* Moz/*
* HTML #abc {color: #666}/* IE6 * *
*+html #abc {color: #999;}/* IE7 * *
Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.
Second, the CSS layout in the center problem
The main style definitions are as follows:
Example Source Code
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 for IE this setting is OK.
But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”
What needs to be explained is that if you want to use this method to make the entire page centered, it is recommended not to be nested in a div, you can split out a number of Div, as long as in each split div defined margin-right:auto; Margin-left:auto; It's OK.
Three, Box model
Example Source Code
#box {
;
For ie6.0-w\idth:500px;
For ff+ie6.0
}
#box {
>//for FF
;
For ff+ie6.0
Width/**/:500px;
For ie6.0-
}
The double distance produced by floating IE6
Example Source Code
#box {float:left; margin:0 0 0 100px;
In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);
#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;
V. IE and width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height. For example, to set the background picture, this width is more important. To solve this problem, you can do this:
Example Source Code
#box {; 80px; height:35px;}
Html>body #box {; auto; height:auto; min-80px; min-height:35px;}
Six, the minimum width of the page
The
Min-width is a handy CSS command that specifies 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. To make this command available on IE, you can put a <div> under the <body> tab, and then specify a class for the div:
then css design:
example Source Code
#con tainer{
min-;600px;
Xpression (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 documents less formal. It actually achieves the minimum width through JavaScript's judgment.
Seven, clear floating
example Source Code
. hackbox{
display:table
//Show objects as block element level tables
}
or
. Hackbox {
Clear:both;
}
or join: After (pseudo object), set the content that occurs after the object, usually in conjunction with content, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. This is the most troublesome
example Source Code
... #box: after{
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
Eight, div floating ie text produces 3 pixel bugs
Left object floating on the right side of the outer patch to locate the left margin, the right object within the text will be from the left 3px spacing.
example Source Code
#box {
Float:left;
;}
#left {
float:left;
;}
#right {
;
}
*html #left {
margin-right:-3px
//This is critical
}
HTML code
<div id=box>
<div id=left>< /div>
<div id=right></div>
</div>
IX, Property selector (this is not compatible, a bug that hides CSS)
example Source Code
p[id]{}div[id]{}
p[id]{}div[id]{}
This is hidden for versions below IE6.0 and IE6.0, and the FF and opera roles
Property selectors and selectors are different. The scope of the child selector is reduced in form, and the property selector is larger in scope, such as P[id], and all of the P tags have the same type of ID.
Ten, ie hide and seek problem
When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not show up when the mouse selects this area is found to be true 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
