Common browser compatibility issues

Reference article:

Http://wenku.baidu.com/link?url=jVvQq3_ZXTSxHWhwEhdtK_7-xbjrLUjJmXY4nH8_ enfpg5qugardyjjdgydorrhiw1mp1cddt6u97kmpne3a1lrt6fppojyqfgxe2erpk6w

Http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html

Http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html

Browser compatibility Issue One: different browser tags default external patches and internal patches are different

Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.

Solution: CSS in *{margin:0;padding:0;}

Browser compatibility Issue two: block attribute tag float, and there is the margin of the case, in the IE6 show margin than set the large

Problem symptom: A common symptom is that the next piece in IE6 is top to bottom row

Solution: Add Display:inline to the label style control of float and convert it into inline properties

Note: Our most commonly used is div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div float, horizontal spacing setting if using margin to achieve, this is a must encounter compatibility problem.

Browser compatibility issue Three: set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond its own set height

Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings

Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.

Note: This usually occurs in the label where we set the small rounded background. This problem occurs because the browser before IE8 will give the label a minimum height of the row height. Even if your label is empty, the height of the label will still reach the default row height.

Browser compatibility issues Four: in-line attribute tags, set display:block after the float layout, there are horizontal margin, IE6 spacing bug

Problem symptom: The spacing in IE6 is more than the spacing set

Solution: Add display:inline;display:table after Display:block;

Note: In-line property labels, in order to set the width, we need to set display:block; (except that the input tag is special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. However, because it is the inline attribute tag itself, so if we add display:inline, its aspect will not be set. We also need to add display:talbe behind Display:inline.

Browser compatibility issue Five: Image default spacing

Problem symptom: When several IMG tags are put together, some browsers will have default spacing, plus padding:0px;margin:0px;

Solution: Use the Float property for the IMG layout

NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers

Browser compatibility question six: Label minimum height setting min-height incompatible

Problem symptom: Because Min-height itself is an incompatible CSS property, setting Min-height is not very well compatible with each browser.

Solution: If we want to set a minimum height of 200px for a label, the setting required is: {min-height:200px; height:auto!important; height:200px; overflow:visible;}

Note: In front of the B/s system, there are many situations where we have this requirement. When the content is less than a single value (such as 300px). The height of the container is 300px, and when the content height is greater than this value, the container height is high, not the scroll bar. This is when we face this compatibility issue.

Browser compatibility issues Seven: Child tags do not open the height of the parent tag

Problem symptom: A parent tag is nested with several child tags, the parent tag does not float, the child label floats, and the child label does not open the parent's height.

Solution: 1. At the end of the sub-label float {<div style= "height:0;clear:both;" >&nbsp;</div>}

2. Parent tag add {Overflow:hidden;}

3. Set the height for the parent tag

Browser compatibility issue Eight: There is a gap between Li

Solution: Li set Vertical-align:middle;

Browser compatibility issue nine:opacity defines the opacity of an element

Solution: Filter:alpha (opacity=80);/*ie supports this attribute */

opacity:0.8;/* support for CSS3 Browser */

Common browser compatibility issues