Div+css IE 火狐兼容问题集锦.doc

div+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动2009年01月19日 星期一 08:40由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。 出现抖动的代码 #outer width:100%; #outer .line float: left; padding-right: 10px; #outer .line .first float: left; #outer .line .second float: left; FirstSecond FirstSecondFirstSecond FirstSecond FirstSecond FirstSecond FirstSecondFirstSecond FirstSecond FirstSecond FirstSecond FirstSecondFirstSecond 消除抖动的代码 #outer width:100%; #outer .line float: left; #outer .line .first float: left; #outer .line .second float: left; padding-right: 10px; FirstSecond FirstSecondFirstSecond FirstSecond FirstSecond FirstSecond FirstSecondFirstSecond FirstSecond FirstSecond FirstSecond FirstSecondFirstSecond div+css - 关键词div cssdiv+css - 论坛http:/WebD/http:/WebG//, homepage看版/SList/HTMLCSS//group/alt.html/group/systems.www.authoring.html/group/systems.www.authoring.stylesheetsdiv+css - 工具Internet Explorer Developer Toolbar, /downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=enThe W3C Markup Validation Service:, /微软印刷技术 - 自由字体信息, TrueType, OpenType, ClearType:, /typography/default.mspx微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 下载, /typography/web/embedding/weft3/download.aspxdiv+css - 常见问题较验div+css格式，/div+css的margin缩写方式div+css的padding缩写方式链接的:link,:visited,:hover,:active四种状态div+css使用backgroundRepeat样式设置背景图片的显示方式, /en-us/library/ms530721.aspxpage-break-before设置打印分布符url()指示符, /TR/CSS21/syndata.html#value-def-uri!important规则, /TR/CSS21/cascade.html#important-rulestable中直接输入的文字和其他标记设置不同的颜色CSS标准中级联的文档, /TR/CSS21/cascade.html#cascadediv+css - Firefox和IE浏览器兼容问题水平居中，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之内的margin的尺寸，在IE6中带有float样式的元素的margin尺寸计算有误，需要借助padding和!important标记实现兼容使用word-wrap设置自动折行, 仅对IE有效在Firefox下会丢失左侧的圆点Internet Explorer的CSS参考资料, /en-us/library/ms531209.aspx用CSS实现cellSpacing属性效果, border-spacing: 10px; border-spacing: expression(this.cellSpacing=10);padding-right在IE6下导致抖动div+css - CSS标准Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:级联样式表第2级第1次修改(CSS 2.1)规范, /TR/CSS21/4.3.2 Lengths长度, /TR/CSS21/syndata.html#length-units 边距属性, /TR/CSS21/box.html#propdef-margin-top8.5 Border properties边框属性, /TR/CSS21/box.html#border-propertiesdiv+css - XHTML标准5.6. Table Modules - Table模块, /TR/xhtml-modularization/abstract_modules.html#sec_5.6. div+css - 其他HTML问题使用OPTGROUP对SELECT中的OPTION分组nowrap标记设置不自动折行, /TR/1998/REC-html40-19980424/struct/tables.html#adef-nowrapleftmargin设置页面左边距, topmargin设置页面上边距disabled属性, /en-us/library/ms533732.aspxAbout Font Embedding:关于字体嵌入, /en-us/library/ms533034.aspxdiv+css实现Firefox和IE6兼容的垂直居中2009-02-25 16:47Firefox中使用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 body background-color:#4c4a37; font:12px Verdana,Arial,Tahoma; text-align:center;margin:0px;padding:0px;font-size:12px;#bigdivwidth: 1006px; Margin-Right: auto;Margin-Left: auto;复杂div+css布局，抛弃float！兼容IE6，IE7，FireFox这个例子最大的特点就是没有用到float就能解决复杂的布局问题，只用到了position。一句话，最外面的div用的是 position:relative;里面的div用position:absolute;再配合top,left,bottom,right来定位，就基本上解决了所有的问题了！more 先看图： 下面是源文件，为了好比较，我把大部分的css写在了div里面： 无标题文档 * margin:0; padding:0; body font-size: 12px; color: #666666; text-align:center; a:link color: #999999; text-decoration: none; a:visited text-decoration: none; color: #999999; a:hover text-decoration: none; color: #999999; a:active text-decoration: none; color: #999999; 标题一 more 1.我是文章的题目我是文章的题目 2.我是文章的题目我是文章的题目 3.我是文章的题目我是文章的题目 4.我是文章的题目我是文章的题目 5.我是文章的题目我是文章的题目 6.我是文章的题目我是文章的题目 DIV+CSS在FireFox和IE6.0的区别2009-09-11 10:241、IE6.0的div的内嵌div可以把父级的高度撑大，而FireFox不可以，要自己设置高度。2、当设置为三列布局时，IE6.0的float宽度不能达到100，而FireFox可以。当设置为两列布局时，两种浏览器都可以。3、在FireFox中，非float的div前面有同一父级的float的div，此div若有背景图，要使用clear：both，才能显示背景图，而IE6.0中不用使用clear：both。4、在text-decoration:underline的属性下，IE6.0显示的下划线会比FireFox低一点。在FireFox中，部分笔画会在下划线的下面1个象素左右。 IE vs FFCSS 兼容要点：DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTMLCSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px;注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;2.IE5 和IE6的BOX解释不一致IE5下divwidth:300px;margin:0 10px 0 10px;div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px，关于这个/*/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ulmargin:0;padding:0;就能解决大部分问题4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为就可以了解决DIV+CSS 在IE和FireFox中不兼容的问题汇集2009-06-19 09:17关于CSS与浏览器兼容这个问题,在网络上的教程很多,确实是个非常让人头疼的事, 这篇文章我感觉不错，可以当作CSS兼容IE6,IE7,FireFox典范，就转载一下,算是回答你的问题,并与大家分享。注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important; 写两句代码来控制一个属性，区别Firefox与IE6：backgroundrange;*background:blue; /这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*； 写两句代码来控制一个属性，区别IE7与IE6：background:green !important;background:blue; /这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。 写两句代码来控制一个属性，区别Firefox与IE：backgroundrange; *background:green; /这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识* 写三句代码来控制一个属性，区别Firefox，IE7，IE6：backgroundrange;*background:green !important;*background:blue; /这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。注意事项：1、float的div一定要闭合。例如：(其中floatA、floatB的属性已经设置为float:left;) 这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 之间加上 这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clearclear:both;此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义： .colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin加倍的问题。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：相应的css为#IamFloat float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。4、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）5、最狠的手段 - !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1background: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 */值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过常见兼容问题：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 和 width5.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解决方法：divmargin:30px!important;margin:28px;注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5 和IE6的BOX解释不一致IE5下divwidth:300px;margin:0 10px 0 10px;div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px关于这个/*/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ulmargin:0;padding:0;就能解决大部分问题 简单实现整个DIV垂直居中2009-04-08 15:24实现原理：使用DIV的绝对定位，先设置DIV的定位上和左分别为50%，然后使用负边界，边界大小是DIV的高度和宽度的一半的。相关代码如下：position: absolute; width:880px;height:365px;left:50%;top:50%;margin-left:-440px; margin-top:-182.5px;div+css ie6.0、ie7.0和firefox的css差别2008年04月01日 星期二 08:29方案一：写三句代码来控制一个属性，区别Firefox，IE7，IE6：background:orange;*background:green !important;*background:blue;方案二：#sample background:red;* html #sample backgroud:green;* +html #samplebackgroud:blue第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。-IE7.0 IE6.0 FF的CSS区别IE7对xhtml 1.0标准的支持有了一点点提高，但还是很垃圾，比6如不到哪去，关于hack办法还是有的经过我个人测试，IE7中，可以使用以下hack。1.html* div.class01IE6 和 IE7可以识别，其它浏览器不识别（注：其它浏览器我测试过FireFox 2.0、Opera 7.6、Netscape7.2，下同。html*中间没有空格，但这样的书写格式不符合CSS规范。）2.*+html div.class01IE7可以识别，IE6和其它浏览器不识别，此方法可以和!important配合使用来实现控制IE浏览器，也可以用来单独控制IE7。另外，*+html的书写格式符合CSS规范。3.利用CSS的lang(zh)选择器，但此方法需要写html标签属性lang=zh，所以个人不推荐用这个方法。方法如下：html: CSS:div.classdiv.class:lang(zh) /* 只有IE和safari不可以识别 */div.class:empty /* 让safari识别 */DIV未知高度的垂直居中代码2009年09月09日 星期三 10:45测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。Vertical centering in valid CSSbody padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;body,htmlheight: 100%; acolor: #333;a:hovercolor: g