Browser compatibility issues

1, FF setting padding after the div will cause width and height to increase, but IE will not. (Can be resolved with!important)
2, centering problem.
1). Center vertically. Set Line-height to the same height as the current Div, and then through Vetical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. margin:0 Auto; (of course not everything)
3, if you need to give the contents of a tag style, you need to set display:block; (common in navigation labels)
4, the FF and IE to the BOX understanding of the difference caused by 2px is also set to float div under IE margin doubled and so on.
5, UL label under FF The default is List-style and padding. 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 set dead height, it is best to add Overflow:hidden. To achieve a high degree of self-adaptation.
7, about the hand-shaped cursor. Cursor:pointer. And the hand only applies to IE. Paste the code:
Compatible code: Compatible with the most recommended modes.
/* FF */
. Submitbutton {
Float:left;
width:40px;
height:57px;
margin-top:24px;
margin-right:12px;
}
/* IE6 */
*html. Submitbutton {
margin-top:21px;
}
/* IE7 */
*+html. Submitbutton {
margin-top:21px;
}
What is browser compatible: When we use a different browser (Firefox IE7 IE6) access to the same site, or page, there will be some incompatibility problems, some show normal, some appear abnormal, we write CSS when it is very annoying, just fixed the browser problem , and 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 released by Microsoft IE7 Browser compatibility does give some Web developers to add a heavy burden, although IE7 has been standardized, but there are many and FF different places, so need to use IE7 compatibility, many friends asked IE7 compatibility is what, in fact, I do not know. For the time being, we haven't found IE7 dedicated compatibility. In addition to the previous piece, the "CSS style for Firefox IE6 IE7" Compatibility is also very useful.
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;
A second compatible IE6 dedicated
_height:100px;
A third compatible IE6 IE7 public
*height:100px;
After the introduction of these three compatible, let's look at how to give an attribute definition in a style IE6 IE7 FF dedicated compatibility, see the following code, the order can not be wrong oh:
Program code
height:100px;
*height:120px;
_height:150px;
Let me briefly explain how each browser understands these three properties:
Under FF, the 2nd, 3 properties ff do not know, so it reads height:100px;
Under IE7, the third attribute IE7 does not know, so it reads the 1th, 2 properties, and because the second property overrides the first attribute, so IE7 finally reads the 2nd attribute *height:120px;
Under IE6, three properties IE6 are known, so three properties can be read, and because the third property overrides the first 2 properties, IE6 finally reads the third property.
1 CSS styles for Firefox IE6 IE7
Now most are compatible with!important, for IE6 and Firefox test can be normal display, but IE7 to!important can be interpreted correctly, will cause the page did not display as required! Find a good compatibility for IE7 is to use "*+html", now with IE7 browsing, should be no problem now write a CSS can do this:
#1 {color: #333;}/* Moz */
* HTML #1 {color: #666;}/* IE6 */
*+html #1 {color: #999;}/* ie*/
Then under Firefox font color display as #333ie6 under the font color display as #666,ie7 under the font color display as #999.
2 centering issues in CSS layouts
The main style definitions are as follows:
body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description
The text-align:center is defined first 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; ”
It should be explained 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 split the div in turn, as long as in each of the split Div defined margin-right:auto; Margin-left:auto; You can do it.
3 box model 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+ie6.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 Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element);
#box {display:block;//You can simulate an inline element as a block element display:inline;//Achieve the same row arrangement effect
iplay:table;
5 ie with width and height issues
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. To make this command available on IE, put a <div> into the <body> tab and specify a class for the DIV:
Then the CSS is designed like this:
#container {
min-width:600px;
Width:e-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 document less formal. It actually achieves the minimum width by JavaScript's judgment.
7 Clear Float
. Compatible with box{
display:table;
Display an object as a block-element-level table
}
Or
. Compatible with box{
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. The most troublesome of these
... #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;
That's the key.
}
HTML code
<div id=box>
<div id=left></div>
<div id=right></div>
</DIV>
9 attribute Selector (this is not compatible, is a bug to hide CSS)
p[id]{}div[id]{}
p[id]{}div[id]{}
This is hidden for IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, the range of the child selector is reduced in form, the range of the property selector is larger, such as P[id], and 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 adapted
Height is not adjusted when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner layer object uses
Margin or paddign.

12 tag embedding does not show problems

The IE7 in the UL tag only shows the contents of the Li tag. The div tag sibling of the Li label does not appear

Browser compatibility issues