CSS browser compatibility issues (in IETester and other browsers)

Recently in the study of some of the browser compatibility issues of the CSS problem, first summarized as follows:
(1) in some modern browsers (Opera,chrome, Google, Safari), if the block-level tags such as div set padding will cause the element height and width increase, in IE will not increase, but only in the IE6 does not increase, IE7 above in IETester test will increase, workaround: You can use the!important to set a height and width


(2) to center the element horizontally vertically: Center vertically: Set the element's line-height to the height of the element itself, and then through Vertical-align:middle; (Note that the content does not wrap), center horizontally: Set the margin of the element to auto But there is no effect under IE5.

(3) If you want to style the inline element like A,spa, you need to set its display to block

(4) The double distance IE generates when floating: if a div is set to float,
and set the MARGIN,IE5 and IE6 will produce double the interval, but in other versions of IE will not, in some modern browsers do not. Workaround: Add a style to the element: Display:inline


(5) The 2nd is IE for CSS magin padding such as the default value of 0px, but FF is not the same, in order to maintain the unity of appearance, even if the padding for 0 you also want to write, lest FF in the browsing dislocation.

(6) Firefox does not support hand, but IE supports pointer, both of which are hand-shaped instructions. Workaround: Use pointer uniformly.

(7) UL tags under ff default list-style and padding, preferably in advance to avoid unnecessary trouble; (common in navigation labels and table of contents)

(8) as an external wrapper div do not set dead height, it is best to add Overflow:hidden, in order to achieve a high degree of self-adaptation;

(9) Transparency issues: IE under: Filter:alpha (Opacity=opacityvalue), where the value of Opacityvalue is 0-100 integers, Firefox and other browsers: Opacity=opacityvalue Where the value of Opacityvalue is 0-1 decimal

(10) The difference between the float properties:
1: The following conditions:
. left{width:300px;height:300px;float:left;border:1px solid Black;}
. center{width:400px;height:400px;float:left;border:1px solid Black;}
. right{width:200px;height:200px;border:1px solid Black;clear:both;}
<div class= "left" >one</div>
<div class= "center" >twod</div>
<div class= "right" >three</div>
In the IE7 and above there are some modern browsers will occur layout dislocation, and in IE5 and IE6 will occur in the class named right of the block in front of the two blocks of the normal display, the general will add a CSS style to a limit: Clear:both

2: As an external wrapper div do not set dead height, in order to let the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box containing float, the height of the automatic adaptation in IE invalid, this time should trigger the layout of IE private properties. With Zoom:1, you can do so, it achieves compatibility. For example a certain wrapper is defined as follows:. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}

(11) When the inner element area is larger than the outer element area: The following example:
. page{width:920px;height:300px;background:purple;margin:0 Auto;}
. center{width:400px;height:400px;border:1px solid Black;}
<div class= "Page" >
<div class= "center" >twod</div>
</div>
Although the outer element defines the width, in IE5 and IE6, the background color of the page changes with the height of the inner element, but in IE7 and above, the page's background color renders the area defined by the page itself and does not change as the inner element is larger than itself.

(12) high degree of non-adaptation:
. page{width:920px;auto;background:purple;margin:0 Auto;}
p{margin-top:20px;margin-bottom:20px; text-align:center;}
<div class= "Page" >
<p>aaaasddddddddddddddddddddddddddddddddddddddddd</p>
</div>
In IE5, IE6, and IE7, there will be normal, highly adaptive, but in other versions of IE and in all modern browsers, page background rendering will only hold the height of the P element itself.
Workaround: Define two empty div before and after the P tag, and set the style to the following:

. page{width:920px;auto;background:purple;margin:0 Auto;}
p{margin-top:20px;margin-bottom:20px; text-align:center;}
. Empty{height:0px;overflow:hidden;}
<div class= "Page" >
<div class= "Empty" ></div>
<p>aaaasddddddddddddddddddddddddddddddddddddddddd</p>
<div class= "Empty" ></div>
</div>
This method will increase the height again in the IE5, not in Safari, but in other modern browsers and other versions of IE can be displayed normally

(13) In the unordered list, how to set the part beyond the Li element to be displayed as an ellipsis: isplay:block;white-space:nowrap; Overflow:hidden; text-overflow:ellipsis; If the Li element is in the table, you need to add another style: table{table-layout:fixed;} will not display properly. This display can be displayed normally in other browsers except that it is not displayed properly in IE5.


There will be voids underneath the IE6. Workaround: Add Display:block to IMG or set Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom

(15) Text and form alignment methods:

CSS browser compatibility issues (in IETester and other browsers)