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

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;) 

这里的NOTfloatC并不希望继续平移，而是希望往下排。

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

在

之间加上

这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可：

.clear{

clear:both;

}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

The corresponding css is

#IamFloat{

float:left;

margin:5px;/*under IE as 10px*/

display:inline;/*under IE as 5px*/}

3. Regarding the inclusive relationship of the container

In many cases, especially when there is a parallel layout in the container, such as two or three float divs, the width is easy to appear question. 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. Questions 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 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 */}

It is worth noting that the sentence xxxx !important must be placed On top of another sentence, it has been mentioned above

There are new problems with IE7.0's support for CSS. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. To solve the compatibility problem of IE7.0, we found the following article:

Now I mostly use !important for hacking. The ie6 and firefox tests can display normally, but ie7 can interpret !important correctly, 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 #999 under IE7.

It is a commonplace issue that CSS is compatible with various browsers. There are tutorials all over the Internet. There is not much novelty in the following content , purely a personal summary, I hope it can be of some help to beginners.

1. CSS HACK The following two methods can solve almost all HACKs today.

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 needs to be 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. Tried and true.

3. Other compatibility tips

1. Setting padding on div under FF will cause 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 not a panacea)

3, if you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags)

4, FF and IE The difference in understanding of BOX leads to a difference of 2px and problems such as the margin of a div set to float doubling under IE.

5, The ul tag has list-style and padding by default under FF. It is best to declare 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 adaptability.

7, About the hand cursor. cursor: pointer. And hand is only applicable to IE.

1 CSS style for firefox ie6 ie7

Nowadays, most of them use !important for hacking. For ie6 and firefox tests, it can be displayed normally.

But ie7 can correctly interpret !important, 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 */

Then the font color is displayed as #333 under Firefox, #666 under IE6, and #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; }

Explanation:

First define TEXT-ALIGN: center in the parent element; this means that the content in 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. It should be noted that if you want to use this method to center the entire page, it is recommended not to set it in a In a DIV, you can split multiple divs in sequence, just 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 floats} Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element) ;The characteristics of Inline elements are: on the same line as other elements,...uncontrollable (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;

IE does not recognize the definition of min-, but in fact it Treat the normal width and height as if there is a min. This will cause 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, there will be no change at all under IE. Set width and height.

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#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; }

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

/*CSS compatibility between IE and Firefox*/

1.DOCTYPE affects CSS processing

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

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

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

5.FF: Supports !important, IE ignores it, you can use !important to set it specially for FF Style

Vertical centering problem of 6.div: vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text, and it’s Centered vertically. The disadvantage is that you need to control the content without line breaks

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

8.FF: To add borders and background colors to links, 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;}

Note that the order of these two margins 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 the div will be interpreted as 300px-10px (right padding)-10px (left padding). The final width of the div is 280px, while on IE6 and other browsers, the width is 300px 10px (right padding) 10px (left padding) = 320px is calculated. 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, please let me know, 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;}

can solve most problems

Notes:

1. The float div must be closed.

For example: (the properties 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 move 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">< /#div>

This div must pay attention to the declaration position and must be placed in the most appropriate place. It must be at the same level as the two divs with float attributes. There cannot be a nested relationship between them, otherwise it will An exception is generated.

And define the clear style as follows:

.clear{

clear:both;}

In addition, in order to allow the height to automatically adapt, add overflow:hidden; in the wrapper.

When the box contains a float, the automatic height adaptation is invalid in IE. At this time, IE should be triggered. The layout private attribute (the evil IE!) can be done using zoom:1;, thus achieving compatibility.

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;/*Understood by IE as 10px*/

display :inline;/*Under IE, it will be understood as 5px*/}

3. Regarding the inclusive relationship of containers

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. Questions 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 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 IE6 IE7 Firefox

The most commonly used method when distinguishing Firefox and IE is the !important method. For compatibility issues with other different browsers and different versions of the browser, there are some methods below, such as :@import, comments, attribute selectors, sub-object selectors and voice-family methods, these methods are described in "Css Website Layout Record".

below It is a css compatibility issue between IE and Firefox

1.DOCTYPE affects CSS processing

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

3.FF: When body is set to text-align, div needs to set margin: auto (main It is margin-left, margin-right) to be centered

4.FF: After setting padding, div will increase height and width, but IE will not, so you need to use !important Set one more height and width

5.FF: supports !important, IE ignores it, you can use !important to set a special style for FF

This article Original by zoku.com - pwdesign. Please keep this information when reprinting. Thank you for your cooperation.