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

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

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

這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用

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

10 IE捉迷藏的問題

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

11 高度不適應(yīng)

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

CSS：

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

解決方法：在P對象上下各加2個空的div對象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瀏覽器獨有的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話，會讓你很心煩，雖然你可以通過很多的兼容，很多的!important 來控制它，但是你會發(fā)現(xiàn)長此以往你會很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起來完美無缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實你要知道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