程序员人生 网站导航

DIV+CSS在不同浏览器中的表现

栏目:互联网时间:2014-11-13 08:22:21

在给员工培训DIV+CSS的进程中,他们向我提出了很多问题,有些问题我自己也没有想到过因而抽了些时间自己进行了1番实验,全部实验在IE7和Firefox中进行:
实验1、如果1个div没有指定border属性那末这个div在阅读器中会不会出现边框呢?
结果:IE7:不会。Firefox:不会。
实验2、如果1个div只指定了border属性的粗细值,那末这个div在阅读器中会不会现边框呢?
结果:IE7:不会。Firefox:不会。
实验3、如果1个div指定了border属性的粗细值,并且也指定了border属性的色彩值,那末这个div在阅读器中会不会出现边框呢?
结果:IE7:不会 Firefox:不会。
实验4、如果1个div只指定了border属性的粗细值,和样式那末这个div在阅读器中会不会出现边框呢?
结果:IE7:会,默许色彩为黑色Firefox:会,默许色彩为黑色。
实验5、如果1个div只指定了border属性的样式,那末这个div在阅读器中会不会出现边框呢?
结果:IE7:会,默许色彩为黑色 Firefox: 会,默许色彩为黑色。
实验6、如果1个div没有指定宽度和高度,那末这个div在阅读器中会是甚么形状?
结果:IE7:宽度为100%,高度为0 ;Firefox:宽度为100%,高度为0。
实验7、如果1个div指定了宽度,没有指定高度,那末这个div在阅读器中会是甚么形状?
结果:IE7:有1定的高度;Firefox:高度为0;
实验8、两个父子关系的div父:#father 子:#son 。CSS代码以下:
#father{
 border:solid red 1px;
 height:300px;
 width:100px;
}
#son
{
 border:1px black solid;
 margin-right:100px;
 width:100%;
}
那末在阅读器中father的实际宽度是多少呢?
结果:IE7:宽度为100px; Firefox:宽度为100px;
实验9、如果1个div未指定其在页面中的对齐方式,那末它在页面中的位置怎样?
结果:IE7:左对齐;Firefox:左对齐。
实验10、两个父子关系div,#father,#son 如果在father中指定text-align=center那末son在阅读器的位置怎样?
结果:IE7:相对father居中对齐;Firefox:相对father左对齐。
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐