1.DOCTYPE affects CSS processing
2.FF: div is already centered when margin-left and margin-right are set to auto, but IE does not work
3.FF: when body is set to text-align, The div needs to set margin: auto (mainly margin-left, margin-right) to be centered
4.FF: After setting padding, the div will increase height and width, but IE will not, so you need to use !important to set more A height and width
5.FF: supports !important, IE ignores it, you can use !important to specially set the style for FF
6.div's vertical centering problem: vertical-align:middle; increase the line spacing to the entire The DIV has the same height as line-height:200px; then insert text and it will be vertically centered. The disadvantage is that it is necessary to control the content without wrapping
7.cursor: pointer can display the cursor finger shape in IE FF at the same time, hand only IE can
8.FF: add border and background color to the link, you need to set display: block, At the same time, set float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.
9. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a difference of 2px. Solution: div{margin:30px!important;margin:28px;} Note that the order of these two margins must not be written in reverse. According to Ajie The statement! important is not recognized by IE, but other browsers can. So it is actually interpreted like this under IE: If div{maring:30px;margin:28px} is repeatedly defined, it will be executed according to the last one, so you cannot just write margin:XXpx! important;
11.ul tag is the default in Mozilla There is a padding value, but in IE only margin has a value, so defining ul{margin:0;padding:0;} first can solve most problems

Notes:

1 , float div must be closed.
For example: (the attributes of floatA and floatB have been set to float:left;)

<#div id="floatA" >
<#div id=”floatB” >
<#div id=”NOTfloatC” >

The NOTfloatC here does not want to continue to pan, but wants to go down. Row.
This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
Add between

<#div class=”floatB”>
<#div class=”NOTfloatC”>

<#div class=”clear”>

This div must pay attention to the declaration position, must be placed in the most appropriate place, and must be combined with two divs with float attributes There cannot be a nested relationship between divs at the same level, otherwise an exception will occur.
And define the clear style as follows:
.clear{
clear:both;
}
In addition, in order to allow the height to automatically adapt, add it to the wrapper Go to overflow:hidden;
When a box containing a float is included, the height automatic adaptation is invalid in IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can do it with zoom:1;, like this Compatibility is achieved.
For example, a wrapper is defined as follows:

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. The problem of doubling margin
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.
The solution is to add display:inline;
For example:

<#div id="imfloat">

The corresponding css is

#IamFloat{
float:left;
margin:5px;/*Under IE, it is understood as 10px*/
display:inline;/*Under IE Then understand it as 5px*/}

3. Regarding the inclusive relationship of the container
Many times, especially when there is a parallel layout in the container, such as two or three float divs, the width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.
4. Issues about height
If content is added dynamically, it is best not to define the height. Browsers can automatically scale, but if it is static content, it is best to set the height. (It seems that sometimes it won’t open automatically. I don’t know what’s going on.)
5. The most ruthless method - !important;
If there is really no way to solve some detailed problems, you can use this method. FF "!important" will be automatically parsed first, but IE will ignore it. As follows

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

It is worth noting that the xxxx !important sentence must be placed above another sentence, as mentioned above
IE7.0 is out, and there are new problems with CSS support. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article:
Now I mostly use !important for hacking. The ie6 and firefox tests can display normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! After searching, I found a good hack for IE7 which is to use "* html". Now browse it with IE7 and there should be no problem.
Now write a CSS like this:

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */

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

--------------------------------

About CSS for each browser Compatibility is a commonplace issue, and there are tutorials everywhere on the Internet. The following content is not too novel, it is purely a personal summary, and I hope it will be of some help to beginners.
1. CSS HACK The following two methods are almost Can solve all today's HACK.

1, !important

With IE7's support for !important, the !important method is now only for IE6's HACK. (Pay attention to the writing. Remember that the declaration position is required in advance.)

2, IE6/IE77 for FireFox

* html and *html are IE-specific tags, and firefox does not support them yet. * html is also a unique tag for IE7.

Note:
* html HACK for IE7 must ensure the following statement at the top of the HTML:

2. Universal float closure
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.

3. Other compatibility tips
1, set padding for div under 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 vertical-align: middle.(Be careful not to wrap the content.)
2). Horizontally centered. margin: 0 auto;(Of course it is not universal)
3. If you need to add styles to the content in the a tag, you need to set it display: block; (common in navigation tags)
4. The difference in understanding of BOX between FF and IE leads to a 2px difference. There are also problems such as the margin of a div set to float doubling under IE.
5, the ul tag is in FF has list-style and padding by default. 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 Upper overflow: hidden. to achieve high adaptability.
7, about the hand cursor. cursor: pointer. And hand is only applicable to IE.

1 CSS style for firefox ie6 ie7
Now large Part of it is hacked with !important, and it can be displayed normally in ie6 and firefox tests.
But ie7 can interpret !important correctly, which will cause the page not to be displayed as required! Find a pin
A good hack for IE7 is to use "*html". Now browse it with IE7 and there should be no problem.
Now write a CSS like this:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。

2 css布局中的居中問題?
主要的樣式定義如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

說明：
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，
只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解釋

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

4 浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}

這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內嵌元素);

#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，
正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。
比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：

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

6 頁面的最小寬度

min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，
而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個div放到body 標簽下，然后為div指定一個類：
然后CSS這樣設計：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現最小寬度。

7 清除浮動

.hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}
或者加入:after（偽對象）,設置在對象后發(fā)生的內容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持，
所 以并不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}
HTML代碼

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

p[id]{}div[id]{}
這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

10 IE捉迷藏的問題

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

11 高度不適應

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

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

Solved Method: Add 2 empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.

/*CSS compatibility list between IE and Firefox*/
1.DOCTYPE affects CSS processing

2.FF: div is already centered when margin-left and margin-right are set to auto , IE does not work

3.FF: When the body sets text-align, the div needs to set margin: auto (mainly margin-left, margin-right) to be centered

4.FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use !important to set an additional height and width

5.FF: supports !important, but IE ignores it, you can use !important as FF Specially set the style

6.div's vertical centering problem: vertical-align:middle; Increase the line spacing to the same height as the entire DIV, line-height:200px; and then insert text, and it will be vertically centered. The disadvantage is that the content must be controlled without line wrapping

7.cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE

8.FF: link with border and background color, You need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

9. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution:
div{margin:30px!important;margin:28px;}
Pay attention to these two margins The order must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important;

10. The BOX interpretation of IE5 and IE6 is inconsistent
Under IE5
div{width:300px;margin:0 10px 0 10px;}
The width of div will be interpreted as 300px-10px (right padding)- The width of the final div of 10px (left padding) is 280px, but on IE6 and other browsers, the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
About this/**/ I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands If so, please tell me, thanks! :)

11.ul tag has padding value by default in Mozilla, but in IE only margin has value, so define it first
ul{margin:0;padding:0;}
It can solve most problems

Notes:

1. The float div must be closed.

For example: (the attributes of floatA and floatB have been set to float:left;)

<#div id="floatA" >
< ;#div id="floatB" >
<#div id="NOTfloatC" >

The NOTfloatC here does not want to continue to pan, but Hope it goes down.
This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
In

<#div class="floatB">
<#div class="NOTfloatC">
Add
<#div class="clear">

This div must pay attention to the declaration position, must be placed in the most appropriate place, and must be consistent with the two There cannot be a nested relationship between divs with float attributes at the same level, otherwise an exception will occur.
And define the clear style as follows:
.clear{
clear:both;}
In addition, in order to allow the height to automatically adapt, add overflow in the wrapper: hidden;
When a box containing a float is used, the height automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can use zoom:1; to achieve this. compatible.
For example, a wrapper is defined as follows:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. Double the margin question.

The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.
The solution is to add display:inline;
For example:

<#div id="imfloat">

The corresponding css is

#IamFloat{
float:left;
margin:5px;/*understood as 10px by IE*/
display: inline;/*under IE, it will be understood as 5px*/}

3. Regarding the inclusive relationship of the container

Many times, especially there are parallel layouts in the container, such as two or three floats div, width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.

4. Regarding height issues

If content is added dynamically, it is best not to define the height. Browsers can automatically scale, but if it is static content, it is best to set the height. (It seems that sometimes it won’t open automatically. I don’t know what’s going on.)

5. The most ruthless method - !important;

If there is really no way to solve some detailed problems, You can use this method. FF will automatically parse "!important" first, but IE will ignore it. As follows
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

div css compatible (2)

Wednesday, April 2, 2008 10:58 am


DIV CSS compatible with IE6 IE7 Firefox

When distinguishing between Firefox and IE The most commonly used method is the !important method. For compatibility issues with different browsers and different versions of the browser, there are also the following methods, such as: @import, annotation, attribute selector, sub-object selector and voice-family, etc. Methods, these methods are described in "Css Website Layout Record".

The following are the CSS compatibility issues between IE and Firefox

1. DOCTYPE affects CSS processing

2 .FF: When the div is set to margin-left and margin-right, it is already centered, but IE does not work

3.FF: When the body is set to text-align, the div needs to set margin: auto (mainly margin-left, margin-right) before it can be centered

4.FF: After setting padding, the div will increase height and width, but IE will not, so you need to use !important to set an additional height and width

5.FF: !important is supported, but IE ignores it. You can use !important to set a special style for FF

PS: The original text is transferred from a website, but the website does not indicate the source of the original text, so the source is unknown.