左迁-
div+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; display:inline;}
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:e-xpression(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>
7.IE 捉迷藏的问题当div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易
发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout 使用line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简
单。
8.float 的div 闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC
并不希望继续平移，而是希望往下排。(其中floatA、floatB 的属性已经设置为float:left;) 这
段代码在IE 中毫无问题，问题出在FF。原因是NOTfloatC 并非float 标签，必须将float 标
签闭合。在<#div class=”floatB”> <#div class=”NOTfloatC”>之间加上< #div class=”clear”>
这个div 一定要注意位置，而且必须与两个具有float 属性的div 同级，之间不能存在嵌套关
系，否则会产生异常。并且将clear 这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部wrapper 的div 不要定死高度,为了让高度能自动适应，要在wrapper 里面加上
overflow:hidden; 当包含float 的box 的时候，高度自动适应在IE 下无效，这时候应该触发
IE 的layout 私有属性(万恶的IE 啊！)用zoom:1;可以做到，这样就达到了兼容。例如某
一个wrapper 如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css 描述可能就是float:left.有的时候我们需要在n 栏的float div
后面做一个统一的背景, 譬如: <div id=”page”> <div id=”left”></div> <div
id=”center”></div> <div id=”right”></div> </div> 比如我们要将page 的背景设置成
蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right 的向下
拉长,而page 居然保存高度不变,问题来了,原因在于page 不是float 属性,而我们的page 由于
要居中,不能设置成float, 所以我们应该这样解决<div id=”page”> <div id=”bg”
style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div
id=”right”></div> </div> </div> 再嵌入一个float left 而宽度是100%的DIV 解决之
④万能float 闭合(非常重要!) 关于clear float 的原理可参见[How To Clear Floats
Without Structural Markup], 将以下代码加入Global CSS 中, 给需要闭合的div 加上
class="clearfix" 即可, 屡试不爽. .clearfix:after { content:".";
display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; }
.clearfix {display:block;} 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调
节，特别是当内层对象使用margin 或paddign 时。例： #box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box">
<p>p 对象中的内容</p> </div> 解决方法：在P 对象上下各加2 个空的div 对象
CSS 代码：.1{height:0px;overflow:hidden;}或者为DIV 加上border 属性。
12 .IE6 下为什么图片下有空隙产生解决这个BUG 的方法也有很多,可以是改变html 的排版,
或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom
|middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框加上vertical-align:middle; <style type="text/css"> <!-- input
{ width:200px; height:30px; border:1px solid red;
vertical-align:middle; } --> </style>
14.web 标准中定义id 与class 有什么区别吗一.web 标准中是不容许重复ID 的,比如div
id="aa" 不容许重复2 次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的
定义便可以使用他. 二.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便
JS 等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则
只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个
ID 来得简单.
15. LI 中内容超过长度后以省略号显示的方法此方法适用与IE 与OP 浏览器<style
type="text/css"> <!-- li { width:200px; white-space:nowrap;
text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } -->
</style>
16.为什么web 标准中IE 无法设置滚动条颜色了解决办法是将body 换成html <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type"
content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html
{ scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000; scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff; } --> </style>
17.为什么无法定义1px 左右高度的容器IE6 下这个问题是因为默认的行高造成的,解决的方
法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎么样才能让层显示在FLASH 之上呢解决的办法是给FLASH 设置透明<param
name="wmode" value="transparent" />
19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,
负值的大小为其自身宽度高度除以二<style type="text/css"> <!-- div
{ position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;
width:200px; height:200px; border:1px solid red; } --> </style>
FF 与IE
1. Div 居中问题div 设置margin-left, margin-right 为auto 时已经居中，IE 不行，IE 需
要设定body 居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内
容居中。
2.链接(a 标签)的边框与背景a 链接加边框和背景色，需设置display: block, 同时设置
float: left 保证不换行。参照menubar, 给a 和menubar 设置高度是为了避免底边显示错位,
若不设height, 可以在menubar 中插入一个空格。
3.超链接访问过后hover 样式就不出现的问题被点击访问过的超链接样式不在具有hover 和
active 了,很多人应该都遇到过这个问题,解决方法是改变CSS 属性的排列顺序: L-V-H-A
Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>
4. 游标手指cursor cursor: pointer 可以同时在IE FF 中显示游标手指状， hand 仅IE
可以
5.UL 的padding 与margin ul 标签在FF 中默认是有padding 值的,而在IE 中只有margin
默认有值,所以先定义ul{margin:0;padding:0;}就能解决大部分问题
6. FORM 标签这个标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0,因此,
如果想显示一致,所以最好在css 中指定margin 和padding,针对上面两个问题,我的css 中一
般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头
疼了.
7. BOX 模型解释不一致问题在FF 和IE 中的BOX 模型解释不一致导致相差2px 解决方
法：div{margin:30px!important;margin:28px;} 注意这两个margin 的顺序一定不能写反，
important 这个属性IE 不能识别，但别的浏览器可以识别。所以在IE 下其实解释成这样：div
{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx
px!important; #box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css 的一个bug) p[id]{}div[id]{} 这个对于
IE6.0 和IE6.0 以下的版本都隐藏,FF 和OPera 作用.属性选择器和子选择器还是有区别的,子
选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p 标签中有id 的
都是同样式的.
9.最狠的手段- !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF 对
于”!important” 会自动优先解析, 然而IE 则会忽略. 如
下.tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; } 值
得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
cloud123-
您发您想实现的效果图，说实在的写的有点乱