Css browser compatibility Summary

This article introduces the compatibility solution of css float, css cut-off ellipsis and other attributes in different browsers to coders. For more information about coders, see. I. CSS style compatibility

1. FLOAT closure (clearing float)

The mismatch of web pages in Some browsers is often caused by float and not closed. This is also one reason why p cannot adapt to the height. If the parent p does not set float, but its child p has set float, the parent p cannot wrap the entire sub-DIV. This usually occurs when a parent DIV contains multiple sub-DIV. Solution:

1) set float to the parent DIV.

2) add an empty DIV after all sub-DIV(Currently Ext does this), for example:

.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
 
   
   

3) Universal float Closure

Add the following code to Global CSS and add class = "clearfix" to the p to be closed.

After (pseudo object), set the content after the object, usually used with content, IE does not support this pseudo object, not supported by Ie browsers, so it does not affect IE/WIN browsers. This is the most troublesome.

4) overflow: auto:

You only need to add overflow: auto to the CSS of the parent DIV. Example:

.parent{width:100px;overflow:auto}.son1{float:left;width:20px;}.son2{float:left;width:80px;}
 
   

The principle is that the peripheral elements cannot be well extended. The problem lies in overflow because overflow is invisible (see W3C explanation ). Now, you only need to add an "overflow: auto" to the peripheral element to solve the problem. The result is that Internet Explorer can be used in addition to Internet Explorer. The problem of IE will be solved. The problem is completely solved by adding "_ height: 1%. I tried it. In fact, it does not apply "_ height: 1%" to IE. Keep it.

2. Cut word ellipsis

.hh {-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

This part of the text will be cut off and ended with a ellipsis. Technology is a good technology, and many people like to use it indiscriminately, but note that Firefox does not support it.

Add this sentence to the page to make the page compatible with IE7.

For reference! Notice a floating problem. Pay attention to setting DIV width and height. Set overflow: hidden. Pay attention to closing the display: inline-block style for Firefox parent p;

3. cursor: hand and cursor: pointer

Firefox does not support hand, But ie supports pointer

Solution: Use pointer

4. CSS transparency

Different browsers support different ways of transparency. To ensure that the transparency can be normally displayed in mainstream browsers such as IE, Firefox, Chrome, and Safari, we can define a class with transparency, because three write records are required, saving every copy to replicate.

The Code is as follows:

. Transparent {filter: alpha (opacity = 60);/* supports IE browsers */-moz-opacity: 0.6;/* supports FireFox browsers */opacity: 0.6; /* supports Chrome, Opera, Safari, and other browsers */}

5.width and padding in CSS

In IE7 and FF, width does not include padding, and Ie6 includes padding.