2024年4月13日发(作者：)
查看文章
zzdiv+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动2008-01-11
1733由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。
[出现抖动的代码]
最近在写一个Div+Css布局的网站首页，以前写的页面都统一width900px;不存在什么布局
呀 什么float的设置。现在没办法呀！要对页面进行切割，分块。幸好，有点css的基础，
不过用起来就比较郁闷了。在ie和firefox下，相同的属性值往往会有不同的显示效果。没
办法 要兼容浏览器 只得一个一个bug去找。但完全兼容浏览器是无法做到的，所以也只能
将个大概的效果展示出来，不要偏差太大太明显就行。
首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。
floatleft;floatright;是常用的浮动属性。为了使div能在一行排列，不得补用到它们。呵
呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。哎！话是这么说，但
真正用到时却出问题了。在ie下，只要前一个div有floatleft;后面的div宽度不超过（总
body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。ie和firefox
下，这点效果是一样。好，接着往下，下一行也这样布局，就分两栏吧。
style type=textcss
#div1{}{width200px;height80px;floatleft;border1px solid blue;}
#div2{}{width600px;height80px;border1px solid blue;}
style
div
div id=div1div
div id=div2div
div
div style=clearboth;margin-top20px; id=div3
div
这样的布局，在ie下和火狐下的显示效果就不同了 在firefox下的margin-top20px;没效
果。。。。
在ie下div3的margin-top有效果，而在firefox下却没效果。为什么？
翻来覆去的想，终究没有想明白。没办法了，后来我有改css.偶然，给div2加上了floatleft
属性，然后margin-top20px都有效果了。郁闷吧 呵呵 不过还是没弄明白为什么会这样，问
题解决了就ok了！
下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left10px;}的效果是
不同的，这样设置的效果才会相同
ul{padding0;margin-left10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...
呵呵 愚昧的个人见解!
div+css扩展框问题浮动下降 IE与Firefox兼容性整理2008-08-14 1057div+css扩展框问
题浮动下降 IE与Firefox兼容性整理
图文混排 容易导致 扩展框问题.
divimg src=imagesindex_ 扩展框问题div
这样排版容易导致 扩展框问题.
尽量定义宽高给定值
浮动下降问题[size=+0]
加上 ｛float：left；｝ 即可```
IE6的双倍边距BUG
解决办法是加上displayinline
IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为displayblock或
者设置vertical-align属性为vertical-aligntop bottom middle text-bottom都可以解
决.
IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 floatleft 或者相
对IE6定义.left
如何对齐文本与文本输入筐
遇到此种问题，设置文本框的 vertical-alignmiddle 就可以了
为什么FF下文本无法撑开容器的高度
[size=+0]
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被
撑开需要怎样设置呢？办法就是去掉height设置min-height200px; 这里为了照顾不认识
min-height的IE6 可以这样定义：
{
heightauto!important;
height200px;
min-height200px;
}
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解
析,然而IE则会忽略.
关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。
在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像
素级的精度。
1.写两句代码来控制一个属性，区别Firefox与IE：
backgroundrange; backgroundgreen;
这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简
单，因为Firefox不能识别，而IE6，IE7都可以识,标准浏览器(如Firefox,Opera,Netscape)
不能识别;。
2.写两句代码来控制一个属性，区别IE7与IE6：
backgroundgreen !important;backgroundblue;
这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6
浏览，却是蓝色的，这是因为IE7能识别!important，一但识别了，就执行，忽略了后面的
那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.
3.写三句代码来控制一个属性，区别Firefox，IE7，IE6：
backgroundrange;backgroundgreen !important;backgroundblue;
这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox
不能识别，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是
因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，
IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，
那就理所当然的执行了最后一句。
注：IE都能识别;标准浏览器(如Firefox,Opera,Netscape)不能识别；IE6能识别，但不能
识别 !important,IE7能识别，也能识别!important;FF不能识别，但能识别!important;
div+css在FireFox里居中的问题。2008-07-15 1531尽管有CSS的vertical-align特性，
但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片
的情况下）。
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display
table;) ，内部子元素定为table-cell (display table-cell),通过vertical-align特性
使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
解决代码如下：
CSS
body {padding 0; margin 0;}body,html{height 100%;}
#outer {height 100%; overflow hidden; position relative;width 100%;
backgroundivory;}
#outer[id] {display table; position static;}
#middle {position absolute; top 50%;} for explorer only
#middle[id] {display table-cell; vertical-align middle; position static;}
#inner {position relative; top -50%;width 400px;margin 0 auto;} for explorer only
order {border 1px solid green; background-color ivory;}
div id=outer
div id=middle
div id=inner class=greenBorder
div
div
div
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选
择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
div+css实现Firefox和IE6兼容的垂直居中2008年03月10日 星期一 0206div+css实现
Firefox和IE6兼容的垂直居中
Firefox中使用display table-cell; vertical-align middle;可以实现div垂直居中，而
IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居
中，还需要 借助于!important标记。Firefox支持!important标记，而IE6忽略!important
标记，因此可以使用! important标记区别Firefox和IE6。
[示例代码]
html
body
div style=display table-cell; vertical-align middle; height 200px; border 1px
solid red;
p垂直居中，Firefox onlyp
p垂直居中，Firefox onlyp
p垂直居中，Firefox onlyp
div
div style=border 1px solid red; height 200px; position relative;
div style=position absolute; top 50%;
div style=position relative; top -50%;
p垂直居中，IE6 onlyp
p垂直居中，IE6 onlyp
p垂直居中，IE6 onlyp
div
div
div
div style=border 1px solid red; height 200px; position relative; display
table-cell; vertical-align middle;
div style=position static !important; position absolute; top 50%;
div style=position relative; top -50%;
p垂直居中，Firefox IE6 onlyp
p垂直居中，Firefox IE6 onlyp
p垂直居中，Firefox IE6 onlyp
IE VS FireFox
CSS 兼容要点：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 和 width
FF 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
div 的垂直居中问题 vertical-alignmiddle; 将行距增加到和整个DIV一样高
line-height200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
cursor pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
FF 链接加边框和背景色，需设置 display block, 同时设置 float left 保证不换行。参照
menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在
menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
发布评论