对于初学web前端的人来说，调试代码是他们的日常工作，但网页中出现的bug却让他们伤透了脑筋，今天千锋郑州老师就来给大家介绍几种常见的浏览器css bug兼容问题及其解决方法。

　　1、div的垂直居中问题

　　vertical-align:middle;

　　将行距增加到和整个DIV一样高 line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

　　2、浮动ie产生的双倍距离

　　#box{

　　float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略

　　}

　　需要注意的是，block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);而Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

　　#box

　　{

　　display:block; //可以为内嵌元素模拟为块元素

　　display:inline; //实现同一行排列的效果

　　diplay:table;

　　}

　　3、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;

　　}

　　4、页面的最小宽度

　　min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

　　放到 标签下，然后为div指定一个类, 然后CSS这样设计：

　　#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );}

　　第一个min-width是正常的;但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

　　5、万能float 闭合

　　关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

　　/* Clear Fix */

　　.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

　　.clearfix { display:inline-block; }

　　/* Hide from IE Mac */

　　.clearfix {display:block;}

　　/* End hide from IE Mac */

　　/* end of clearfix */

　　或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

　　6、IE6下为什么图片下有空隙产生

　　解决这个BUG的方法也有很多,可以是改变html的排版;或者设置img 为display:block;或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决。

　　7、web标准中定义id与class有什么区别吗?

　　(1)web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他;

　　(2)属性的优先级问题 ID 的优先级要高于class;

　　(3)方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单。

　　8、无法定义1px左右高度的容器

　　IE6下这个问题是因为默认的行高造成的,解决的方法也有很多，例如:overflow:hidden | zoom:0.08 | line-height:1px

　　9、IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

　　解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

　　10、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*/

　　}

　　如果你想了解更多关于Web前端开发方面的问题，如果你想快速掌握web前端技术，不妨来千锋郑州看一看。这里有专业的老师带你，入名企拿高薪不再是问题，还有更多web前端开发资料供你参考。

上一篇

郑州大数据培训学习笔记分享 MapReduce的执行

下一篇

郑州大数据培训学员分享Hadoop知识点及学习方法