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

说明：

除了ie5.5，其他所有浏览器中，设置padding以后高度和宽带都会增加

2. 使用XHTML 1.0 Transitional后，div宽度

说明：

在使用XHTML 1.0Transitional以后div宽度都不包含border的宽度了，设置宽度的时候需要注意下。

3. 外层相对定位，内层绝对定位

说明：

ie6下，外层div的postion: relative，并设置text-align，内层div的postion:absolute，这时内层的位置是相对于text-align而言的

例如：

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

<divstyle="position:absolute;top:0;left:0;background:#CCC;">position:absolute</div>

</div>

4. &nbsp; 显示的大小不一致

说明：

默认字本显示问题，导致&nbsp;显示的大小不一致，在ie下比较小一点，其他的浏览器都一致，当你使用了&nbsp;造成问题时请注意。

5. 边框重叠说明

说明：

为 table、td 都指定了边框后，然后使用border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。

6. 设置td padding的说明

说明：

设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带，但是padding-top和padding-bottom的效果不一样。最好不要使用td的ding-top和padding-bottom

7. ul设置的说明

说明：

ul一般设置：list-style-type:none;margin:0px;padding:0px；li一般设置：list-style-type:none;list-style-position:outside

8. 使一个层垂直居中于浏览器中

说明：

使用百分比绝对定位,与外补丁负的技巧,负的大小为其自身宽度高度除以二

div {

position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;

width:200px; height:200px; border:1px solid red;

}

9. 万能 float 闭合

说明：

可以用这个解决多个div对齐时的间距不对， 将以下代码加入GlobalCSS 中,给需要闭合的div加上 class=”clearfix” 即可

<style>

/* Clear Fix */

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

}

.clearfix {

display:inline-block;

}

/* Hide from IE Mac \*/

.clearfix {display:block;}

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