[Repost] div css is compatible with ie6 ie7 ie8 ie9 and FireFox Chrome and other browser methods_html/css_WEB-ITnose

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文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和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作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：

 

p对象中的内容

 

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.