Divided css layout is compatible with IE6 IE7 FF FAQ collection
Common to all browsers (mainly used in the market is IE6 IE7 FF)
height: 100px;

For IE6 only
_height: 100px;

For IE6 only
*height: 100px; FF shared

height: 100px !important;

1. CSS compatibility
The following two methods can solve almost all compatibility problems today.

1, !important (not very recommended, use the following The safest feeling)

With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)

Code :

Note:
* To be compatible with IE7, the html must have the following statement at the top of the HTML:

Code:

2. Universal float closure (very important!) You can use this to solve the problem of incorrect spacing when aligning multiple divs,

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.

Code:

3. Other compatible Tips (quite useful)

1. Setting padding on a div in FF will cause the width and height to increase, but IE will not. (can be solved with !important)
2. Centering problem.

1 ). Vertically centered. Set line-height to the same height as the current div, and then pass vetical-align: middle. (Be careful not to wrap the content.)

2). Horizontally centered. margin: 0 auto; (Of course it is not omnipotent )

3. If you need to add styles to the content in the a tag, you need to set display: block; (commonly found in navigation tags)

4. The difference in understanding of BOX between FF and IE results in a 2px difference. Float divs have issues like margin doubling under IE.
5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden to achieve height adaptation.
7. Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:
8. IE6 double margin BUG

After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add display:inline
9. Why can’t the text in FF expand the height of the container?
Containers with fixed height values ??in standard browsers will not be stretched like in IE6. So if I want to have a fixed height and be stretched, what settings should I make? The way is to remove the height setting and set min-height:200px; In order to take care of IE6 that does not know min-height, it can be defined like this:
div { height:auto!important; height:200px; min-height:200px; }

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 compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, some differences will appear. Regarding compatibility issues, some are displayed normally and some are displayed abnormally. We will be very annoyed when writing CSS. We just fixed the problem of this browser, but another browser has a new problem. Compatibility is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!

Program code

The first one is compatible with IE FF and is common to all browsers (it is not actually compatible)
height:100px;
The second one is compatible with IE6 Private
_height:100px;
The third one is compatible with IE6 IE7 Public
*height:100px;
height:100px;
*height:120px;
_height:150px; >

Under FF, the second and third attributes are not recognized by FF, so it reads height:100px;

Under IE7, the third attribute is not recognized by IE7, so it reads the first , 2 attributes, and because the second attribute covers the first attribute, IE7 finally reads the second attribute *height:120px;

Under IE6, IE6 recognizes all three attributes. , so all three properties can be read, and because the third property overwrites the first two properties, IE6 finally reads the third property.

1 CSS styles for firefox ie6 ie7

Now most of them are compatible with !important. For ie6 and firefox tests, they can be displayed normally, but ie7 can correctly interpret !important and will As a result, the page is not displayed as required! I found a good compatibility method for IE7 by using "* html". Now browse it with IE7. There should be no problem. Now write a CSS like this:

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE*/

Then under firefox The font color is displayed as #333, the font color is displayed as #666 under IE6, and the font color is displayed as #999 under IE7.

2 Centering issues in css layout

The main style definitions are as follows:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Note:

First define TEXT-ALIGN: center in the parent element; this means that the content within the parent element is centered; for IE This setting is enough.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when setting the child element definition

It should be noted that if you want to use this method to center the entire page , it is recommended not to wrap it in a DIV. You can split out multiple divs in sequence, as long as you define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 different interpretations of the box model.

#box{

width:600px;
//for ie6.0- width:500px;
//for ff ie6 .0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff ie6.0
width /* */:500px;
//for ie6.0-
}

4 Double distance generated by floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}

Let’s talk about the two elements of block and inline in detail, and the Block element The characteristics are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block elements); the characteristics of the Inline element are: it is on the same line as other elements,... cannot be controlled (inline elements) ;

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

5 IE Problems with width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values ????will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 頁面的最小寬度

min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把 width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個(gè)

9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)

p[id]{}div[id]{}
p[id]{}div[id]{}

這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用

屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.

10 IE捉迷藏的問題

當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。
解決辦法：對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡(jiǎn)單。

11 高度不適應(yīng)

高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用
margin 或paddign 時(shí)。例：

CSS：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

屏蔽IE瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/
select:empty {font:12px !important;} /*safari可見*/
這里select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。

僅IE7識(shí)別
*+html {…}
當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)兼容。

IE6及IE6以下識(shí)別
* html {…}
這個(gè)地方要特別注意很多地主都寫了是IE6的兼容其實(shí)IE5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。
html/**/ >body select {……}
這句與上一句的作用相同。

僅IE6不識(shí)別
select { display /*IE6不識(shí)別*/:none;}
這里主要是通過CSS注釋分開一個(gè)屬性與值，流釋在冒號(hào)前。

僅IE6與IE5不識(shí)別
select/**/ { display /*IE6,IE5不識(shí)別*/:none;}
這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。

僅IE5不識(shí)別
select/*IE5不識(shí)別*/ { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別

盒模型解決方法
selct {width:IE5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點(diǎn)要明確。

清除浮動(dòng)
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問題 。

截字省略號(hào)
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前Firefox并不支持。

只有Opera識(shí)別
@media all and (min-width: 0px){ select {……} }
針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。

以上都是寫CSS中的一些兼容，建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系)，這樣可以減少你使用兼容的頻率，不要進(jìn)入理解誤區(qū)，并不是一個(gè)頁面就需要很多的兼容來保持多瀏覽器兼容)，很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導(dǎo)入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。

IE5.x的過濾器，只有IE5.x可見
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */

IE5/MAC的過濾器，一般用不著
/**//*/
@import "ie5mac.css";
/**/

IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋
Only IE
所有的IE可識(shí)別

只有IE5.0可以識(shí)別
Only IE 5.0+
IE5.0包換IE5.5都可以識(shí)別

僅IE6可識(shí)別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識(shí)別
Only IE 7/-
僅IE7可識(shí)別

Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話，會(huì)讓你很心煩，雖然你可以通過很多的兼容，很多的!important 來控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起來完美無缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。

div ul li 的嵌套順序

Specific nesting writing method

Follow the above nesting method,

and then in CSS It tells ul {Margin:0px;Padding:0px;list-style:none;}, where list-style:none does not allow the

tag to display directory type tags such as dots or numbers at the front, because IE The default effect displayed by Firefox is somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. The difference in pixels, but that's already perfect. You don't need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. No need for you to repeatedly debug different compatibility methods in different places? This will reduce your trouble. You can easily sort out the places you want to be compatible with using ul.class1, ul.class2, ul.class3 {xxx:xxxx}, and make them compatible. Give it a try and don’t nest randomly again. Although you can nest almost as much as you want with Div CSS, following the above rules will make it much easier for you and get twice the result with half the effort!

Reprinted from: http://blog.csdn.net