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

2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的大于3

3、去掉所有的注释。

4、修正注释的写法。<!--[if !IE]>这里是注释内容<![endif]-->

5、在第二个容器后面加一个或者多个<divstyle="clear"></div>来解决。

41. ff、chrome绝对定位无效

问题：

在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。

解决：

设置td的display:block。

42. IE6 绝对定位的问题

问题：

<div style="position:relative;border:1px solidorange;text-align:center;">

<div style="position:absolute;top:0;left:0;

background:#CCC;">dovapour</div>

<a href="#" title="vapour的blog">内容</a>

</div>

解决：

left的定位错误问题

1、给父层设置zoom:1触发layout。

2、给父层设置宽度width

bottom的定位错误问题

1、给父层设置zoom:1触发layout。

2、给父层设置高度height

43. 子容器宽度大于父容器宽度时，内容超出

问题：

子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展，子DIV将超出父DIV

解决：

设置overflow:hidden，子DIV将不会超出父DIV。

44. float的div闭合的问题

问题：

例如：<#div id=”floatA” ><#div id=”floatB”><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)

这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签 闭合。

解决：

在 <#div class=”floatB”> <#divclass=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。并且将clear这种样式定义为为如下即可：.clear{ clear:both;}

45. 单选框、复选框与后面的文字对不齐

问题：

单选框、复选框与后面的文字对不齐。

解决：

.align{font-size:12px;}

.align input{ display:block; float:left;}

.align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}

需注意的问题：

1. 设置padding后高度和宽带都会增加

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