博主呓语:

最完整的div css样式兼容问题解决方案 浏览器兼容手册

Posted by 破冰 on 2012-6-18 15:31 Monday

  最完整的div css样式兼容问题解决 ,这都是个人经验,一字一字敲出来的,这讲解了FF和IE下的div css样式兼容问题 ,只要掌握了这些div css样式的兼容问题一般都能解决 .
  一个网站其实最撑门面的是网站界面风格,我们SEO推广最多,把顾客引入网站,顾客看到你网站这么烂,肯定会打消他购买欲望。因为顾客所用的浏览器各有不同,所以我们要去写兼容它们的CSS样式。下面介绍下解决浏览器兼容问题的方法和技巧..
一、 作为一个网站开发人员来说,Firefox(火狐浏览器)是不能少的工具,你可以到www.firefox.com官网下载一个安装. 安装完之后你单击浏览器菜单栏的 工具 ------> 附加组件 ,然后搜索 firebug 插件 ,安装之后重启浏览器就可以用了。使用方法:重启firefox浏览器后,单击右键,然后查看元素,你就可以看到你选中元素的HTML 和 CSS 样式了. (你还可以查看整站的HTML、JS和CSS).

二. CSS样式兼容问题
1.div的垂直居中问题
一般都知道 vertical-align:middle是垂直居中的CSS样式代码,但单独的vertical-align:middle并不能使文本或者层(div)垂直居中(注:相对于另一个div层). 必须在vertical-align的基础上加上这个文本或者层(div)行高,也就是要加上一个line-height的属性. 如:vertical-align:middel;line-height:15px; 这二个属性同时用就可以达到你的效果了

2.hover事件的问题(鼠标移上去的链接事件)
当一个链接访问后(也就是被点击后) ,你再点击这个链接这个链接不再具备hover事件,说明这个链接失去了hover和active事件 . 如一个链接没有点击时,鼠标移上去变颜色,但点现之后,再把鼠标移上去,这个链接不再变颜色 。 解决方法:重新书写链接的样式 ,顺序是先 a:link{ } a:visited{ } a:hover{ } a:active{ } 这样按顺序定样式就不会出现上面这种问题

3.margin 在IE 中加倍的问题
样式设置为float的div在 IE下设置的margin属性会出现加倍的情况。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 如:<#div id=”float”> 相应的css为 #Float{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} display:inline 是让元素在同一行展示,并消除margin加倍的情况 ;display:block 是让元素在下一行展示,同时消除margin加倍的情况

4.DIV浮动产生3像素
DIV浮动IE文本产生3像素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

5.IE 中有些文本不能显示问题
一些有些文本内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:给这个文本加上一个行高line-height 就可以了

6.清除浮动问题
有些div布局在使用float 时会影响下一个层的布局样式 如:<#div id="floatA"><#/div><#div id="floatB"><#/div><#div id="C"><#/div>, 当第一个层(floatA)和第二个层(floatB)使用float漂浮属性时,也会使第三个层(C)个层跟着漂浮。解决方法是:在浮动层的下面加上一个清空飘浮的样式.clear{clear:both}整合就是<#div id="floatA"><#/div><#div id="floatB"><#/div><#div class="clear"><#/div><#div id="C"><#/div>,这样第一个层floatA层和floatB层就不会影响C层了

7.IE6下图片产生间隙问题
IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

8.有些层高度不自适的问题
有些层的内容太多了,导致文本里的内容把层给挤破了。解决方法:设定这个层的高度,并加上overflow:hidden;(把溢出层的内容隐藏掉) 如:line-height:500px;overflow:hidden;

8.DIV 层居中的问题
Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

9.游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

10.按钮图片显示不出来的问题
在IE 中有些背景图片显示不出来,只是显示一个白色背景的按钮。解决方法是:设置背景为透明就可以了,如:background-color:Transparent;

11.在FF(火狐浏览器)和IE 中高度不能撑开的问题
为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?解决方法:去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }

12.ul 中padding和margin在FF(火狐浏览器)中默认是有间隙的,解决方法是:预先定义ul{margin:0;padding:0} ,默认情况下li 在浏览器中是有一个圆点的,去除圆点的方法是:预先定义li {list-style:none}

13.很多元素在默认情况下是有间隙的,解决方法是预先定义 body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}

14.input 边框线在FF(火狐浏览器)和IE浏览器中的兼容问题
在火狐浏览器中要让input输入框没有边框线的样式是,border:none; 但是这样的样式在IE不兼容,在IE里显示会出现边框线,应该这样写border:0px; 这样在IE和火狐浏览器中都不会有边框线了..

一般只要遵循W3C标准来写样式,界面是不会出现什么问题的,下面介绍几种hack 方法 (不推荐用)

点击查看原图

发表评论: