This article explains the Firefox firefox browser and IE browser in the HTML code when writing differences, programmers have to develop debugging, you can press the HTML tags described below for debugging.
1.UL different, ie under the default is margin leave white, FF under the default is padding leave white, so to use margin:0;padding:0 first, to achieve compatibility.
2. After a given height, when the content is too high, the true height is greater than the given height, the two are different
What else is there?
In the process of FF test DIV+CSS, many problems are found, mainly because of the nonstandard writing of code.
1, center problem
Div in the content, ie defaults to center, and FF defaults to left-aligned.
The way to center FF content is to add code Margin:auto;
2, Height problem
With two horizontal div arrangement, above the div set height, if the actual content of the div is greater than the set height, there will be two div overlapping in FF phenomenon, but in IE, the following Div will automatically give space to the above Div. So in order to avoid overlapping layer, height must be controlled properly, or simply do not write height, let him adjust automatically.
or set: Overflow:hidden
3, Clear:both;
Take footer For example, sometimes if the above uses the layout of the N columns of float control, then when browsing in FF footer is likely to be dishonest and move around-because he is still under floating (float) control. If you want it to stay at the bottom of the page, write clear:both in the footer Div, you can achieve the effect!
4. Double distance from floating ie
#box {
Float:left;
width:100px;
margin:0 0 0 100px; In this case, IE will produce a distance of 200px
Display:inline; Make floating Ignore
}
5, the key explanation: Display:block,inline two element display (show)
Display:block; Can simulate an inline element as a block element
Display:inline; The effect of implementing the same row arrangement
diplay:table; For FF, simulating the effect of a table
The features of the Display:block element are:
Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set
<div>, <p>,
Display:inline is to display the elements as inline elements.
The features of the inline element are:
and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.
<span>, <a>, <label>, <input>, and <em> are examples of inline elements.
Example:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
#inline {width:400px height:40px;background: #99CCCC;p adding:15px 0px 0px 15px}
#inline ul{margin:0px; list-style:none;}
#inline ul li{display:inline; font-size:12px;margin-left:5px}
#block {width:400px height:40px;background: #FFCC99;p adding:15px 0px 0px 15px}
#block ul{margin:0px; list-style:none;}
#block ul Li{display:block; font-size:12px;height:20px}
#div_inline {width:800px;display:inline;height:120px;}
</style>
<body>
<div id= "inline" >
<ul>
<li> Daily Enrollment Network
<li> Cardiovascular Network
<li> Hypertension Network
<li> Congenital heart disease Network
</ul>
</div>
<p>
<div id= "Block" >
<ul>
<li> every day enrollment network </li>
<li> Cardiovascular Network </li>
<li> Hypertension Network </li>
<li> Congenital heart disease network </li>
</ul>
</div>
</p>
</body>
6, IE and ff width and height of the problem
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 will always be correct. The overall narrowest 770px, the widest 1024px, that is, the window is less than 770xp out of the bottom scroll bar, if greater than 1024px Automatic Screen center. IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. In this way, if only 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.
CSS design like this:
#container {
min-width:600px;
Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
}
The first min-width is normal, but the width of line 2nd uses javascrīpt, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by javascrīpt judgment.
The same approach can also achieve maximum width for IE:
#container
{
min-width:600px;
max-width:1200px;
Width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";
}
7, FF: Support!important, IE is ignored,
Available!important (example: height:30px!important; height:26px;) for FF specially set style
The vertical center of the div problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines
Cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can
FF: Link plus border and background color, you need to set Display:block, and set Float:left guarantee do not wrap (background picture needs to set Float:left). Refer to MenuBar, to 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
In FF and IE, the box model explains inconsistencies resulting in a 2px resolution:
div{margin:30px!important;margin:28px;}
Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:
Div css xhtml xml Example source code Example source code [www.52css.com]
DIV{MARING:30PX;MARGIN:28PX}
Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;
In the Firefox/mozilla browser, the actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-r Ight-width) + (margin-right); in Ie/opera browsers, the actual width of the object = (margin-left) + width + (margin-right).
