Div+css IE 火狐兼容问题集锦(9)

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 {

width:300px; margin-left:auto; margin-right:auto; }

针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样： #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类： 然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? \

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略. 关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

1.写两句代码来控制一个属性，区别Firefox与IE： background

range; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

2.写两句代码来控制一个属性，区别IE7与IE6： background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份. 3.写三句代码来控制一个属性，区别Firefox，IE7，IE6： background

range;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

div+css使用!important标记实现Firefox和IE6处理padding尺寸上的兼容 2009年07月11日 星期六 13:31

div+css使用!important标记实现Firefox和IE6处理padding尺寸上的兼容 [示例代码]

通过借助!important标记，可以设置Firefox中的width值为IE6中的width值减去padding值，这样就实现了Firefox与IE6的padding效果尺

寸兼容。

[div+css关键词] div css

[div+css重要工具]

Internet Explorer Developer Toolbar,

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en [div+css的常见问题]

较验div+css格式，http://validator.w3.org/ div+css的margin缩写方式 div+css的padding缩写方式

链接的:link,:visited,:hover,:active四种状态

[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标记，!important需要放在前面才能起作用 手形鼠标指针，使用cursor: pointer;

padding的尺寸，在Firefox中padding是计算在width之外的，而IE6是计算在width之内的

文章出处：DIY部落

(http://www.diybl.com/course/1_web/css/cssjs/2007104/76448.html) *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签。所以要解决padding的兼容问题就要靠前面提到的标签。

以sccas-site为例，左侧导航栏在padding上产生了ie6、ie7以及ff浏览器不兼容，修改代码如下：

#menu7 li a {

height:25px;

/*border-right:1px solid #666666;*/ text-decoration: none;

margin:0px 0px 0px -40px !important;（firefox可识别，可使导航栏整体位置与ie中相同）

margin:0px 0px 0px 0px; }

#menu7 li a:link{ /*在firefox中识别此段link的css*/ float:none; color: #000; display: block; font-weight:bold;

background-color:#CCCCCC; border-top:1px solid #fff;

/*border-left:1px solid #333333; border-bottom:1px solid #333; border-right:1px solid #333;*/ padding: 8px 0 0 20px; }

*html #menu7 li a:link{ /*在ie6中识别此段link的css*/ float:none; color: #000; display: block; font-weight:bold;

background-color:#CCCCCC; border-top:1px solid #fff;

/*border-left:1px solid #333333; border-bottom:1px solid #333; border-right:1px solid #333;*/ padding: 8px 0 0 10px; }

*+html #menu7 li a:link{ /*在ie7中识别此段link的css*/ float:none; color: #000; display: block; font-weight:bold;

background-color:#CCCCCC; border-top:1px solid #fff;

/*border-left:1px solid #333333; border-bottom:1px solid #333; border-righ …… 此处隐藏：2363字，全部文档内容请下载后查看。喜欢就下载吧 ……