CSS 浏览器兼容问题
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是
难事,从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下.对于 web2.0 的过度,
请尽量用 xhtml 格式写代码,而且 DOCTYPE 影响 CSS 处理,作为 W3C 的标准,一定要加
DOCTYPE 声名.
CSS 技巧
1.div 的垂直居中问题 vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-
height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin 加倍的问题 设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存
在的 bug。解决方案是在这个 div 里面加上 display:inline; 例如： <#div id=”imfloat”> 相应
的 css 为 #IamFloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解
为 5px*/}
3.浮动 ie 产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之
下 IE 会产生 200px 的距离 display:inline; //使浮动忽略} 这里细说一下 block 与 inline 两个
元素：block 元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元
素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效
果 diplay:table;
4 IE 与宽度和高度的问题 IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当
作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值
就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width:
80px; min-height: 35px;}
5.页面的最小宽度 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 的判断来实现最小宽度。
6.DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左边距来定位，右
边对象内的文本会离左边有 3px 的间距. #box{ float:left; width:800px;} #left{ float:left;
width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div
id="box"> <div id="left"></div> <div id="right"></div> </div>
资源评论
