DIV CSS compatibility issues (2)_html/css_WEB-ITnose

Regarding the issue of div css being compatible with IE and firefox

The div css webpage that was finally created fully complies with W3C standards. The display is perfect under IE7. When I tested it with Firefox, I found it was confusing

and it was terrible. After some research, I found that compatibility is very

simple.

1. Add div {overflow: hidden;}, the purpose is to make the div automatically adapt to the content height
2. Horizontal div coat div

Additionally set
ul {
margin: 0px;
padding: 0px;
}
is to eliminate the space in front of li

div css compatibility issues

CSS compatibility points ：DOCTYPE affects CSS processing

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

FF: When body is set to text-align, div needs to set margin: auto (mainly margin-left, margin-right) can be used to

center

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

height and width

FF: supports !important, IE ignores it, you can use !important to specially set the style for FF

Vertical centering problem of div: vertical- align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text after

and it will be vertically centered. The disadvantage is that

Control the content without wrapping

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

FF: link with border and background Color, you need to set display: block, and 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, you can insert a space in the menubar. Small set of XHTML CSS compatibility solutions

There are many benefits to using XHTML CSS framework, but there are indeed some problems. Whether it is due to inexperience or unclear thinking, I will first

write down some of the problems I encountered below. .

1. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
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 be recognized by

. So it is actually interpreted like this under IE

:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px }

If there are repeated definitions, the last one will be executed, so you cannot just write margin:XXpx!important;

2. The BOX interpretation of IE5 and IE6 is inconsistent. div{width:300px; under IE5; 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

div is 280px, while in IE6 On 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 css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width:340px;margin:0 10px 0 10px}

I don’t quite understand what this is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands it, please tell me

. Thanks. ! :)

3.ul tag has padding value by default in Mozilla, but in IE only margin has value, so define it first

div css xhtml xml Example Source Code Example Source Code [ www.52css.com]
ul{margin:0;padding:0;}

can solve most problems

4. Regarding scripts, it is not supported in xhtml1.1 language attribute, just change the code to

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

Solution to div css compatibility problem (IE5/5.5/6/7/FF)

I have found several different versions of IE browsers that can run independently, so I just wanted to try them out Page compatibility issues. You won’t know until you try it. Pages that work fine in IE6

and FF will be messed up in IE5 and IE5.5

. I have always heard that IE5 is a "nail" made by WEB standards. ”, now I have to believe it.

Since there is a problem, let’s look for a solution. After searching on the Internet, there are still many related articles. I think the most direct method is "IE

conditional comment". It is very convenient to write styles for different

versions of IE. But this requires writing a style for each version, which is not conducive to file optimization.

After looking for some related CSS HACKs, I felt that IE5/IE5.5/IE6/FF HACKs should be written together. After testing, I finally found a good one

Method, let’s take a look at how

is implemented:

Everyone knows that using the !important statement can increase the application priority of specified style rules, as in the following example:

E1{

background-color: red !important;

background-color: blue;

}

但这样写在IE中会有个问题，看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》，你会

知道在IE6和FF中用! important声明

可以提高优先级别，但在IE6中的!important声明并不是绝对的，它会被之后的同名属性定义所替换。也

就是说在上面的例子中，IE6所应用的

是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。根据这一点，我们就可以把FF和

IE的样式分离开。

OK ，解决了FF和IE的问题，现在来解决IE自己的问题。

看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发，使用“＞”IE是否真的可

以认得？我们来看个例子：

E1{

background-color: red;

＞background-color: blue;

}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识

别“＞”，则应该得到的蓝色的背景

，因此可以知道“＞”只有IE可以识别，这点是很重要的哦！在后面大家就会知道了。（注：我测试过其

它的一些符号，如“~”、“`”、“

＜”等，都只有IE可以识别，在此为了感谢嘟嘟，推荐使用“＞”）

我们再来看个例子：

E1{

＞background-color: black;

＞background-color : green;

}

这个例子在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这

就说明了第二句定义只有IE5.5能识别

，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离

出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了，来看看例子：

E1{

＞background-color: red;

}

E1{

＞background-color: black;

}

这里我们又用到一个HACK，就是“E1{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到

的结果是，在IE5中的背景色为红色；

在IE5以上版本中得到的是黑色背景。

终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式了。来看个完整

的例子：

E1{

width: 500px;

height: 50px;

background-color: red !important;

background-color: blue;

text-align:center;

}

E1{

＞background-color: black;

＞background-color : green;

}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE

的定义在属性前要加“＞”，因为

“E1{}”这个HACK在FF中可以识别。也许你会想，上面的例子不是可以写成：

E1{

width: 500px;

height: 50px;

background-color: red;

＞background-color: blue;

text-align:center;

}

E1{

＞background-color: black;

＞background-color : green;

}

这样不就又可以省下几个字节？是没错，可是HACK不是标准，如果滥用HACK，那只会离标准越来越远！

div+css实现Firefox和IE6兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要

借助IE6中css的特点实现垂直居中。为

了实现Firefox和IE6兼容的垂直居中，还需要借助于!important标记。Firefox支持!important标记，而

IE6忽略!important标记，因此可以使

用! important标记区别Firefox和IE6。

[示例代码]

  

      

          

垂直居中，Firefox only

          

垂直居中，Firefox only

          

垂直居中，Firefox only

      

      

           

               

                   

垂直居中，IE6 only

                   

垂直居中，IE6 only

                   

垂直居中，IE6 only

               

           

      

      

           

               

                   

垂直居中，Firefox IE6 only

                   

垂直居中，Firefox IE6 only

                   

垂直居中，Firefox IE6 only

               

           

      

  

div css的浏览器兼容问题
水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而

IE6中则需要借助IE6中css的特点实现垂

直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记