浏览器兼容性测试方案_常见浏览器兼容性问题_多浏览器兼容测试策略(13)

然后CSS这样设计：

#container{ min-width: 600px;width:expression(document.body.clientWidth < 600?“600px”: “auto” );}

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

清除浮动

.hackbox{ display:table; //将对象作为块元素级的表显示}或者.hackbox{ clear:both;}

或者加入:after(伪对象),设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left;width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{margin-right:-3px; //这句是关键}

HTML代码

属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

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

高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign时。

例：

p对象中的内容

CSS：#box{background-color:#eee; }

#box p {margin-top:20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

一、超链接点击过后hover样式就不出现的问题？

被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序:L-V-H-A

二、IE6的margin双倍边距bug问题

例如：

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline;

三、为什么中火狐浏览器下文本无法撑开容器的高度？

标准浏览器中固定高度的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的IE6可以这样定义：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-39333-13.html