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



在给员工培训DIV+CSS的过程中。他们向我提出了非常多问题，有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验，所有实验在IE7和Firefox中进行：

实验一、假设一个div没有指定border属性那么这个div在浏览器中会不会出现边框呢？

结果：IE7:不会。Firefox:不会。

实验二、假设一个div仅仅指定了border属性的粗细值，那么这个div在浏览器中会不会现边框呢？

结果：IE7:不会。Firefox:不会。

实验三、假设一个div指定了border属性的粗细值，而且也指定了border属性的颜色值。那么这个div在浏览器中会不会出现边框呢？

结果：IE7:不会 Firefox:不会。

实验四、假设一个div仅仅指定了border属性的粗细值。和样式那么这个div在浏览器中会不会出现边框呢？

结果：IE7:会，默认颜色为黑色Firefox:会。默认颜色为黑色。

实验五、假设一个div仅仅指定了border属性的样式，那么这个div在浏览器中会不会出现边框呢？

结果：IE7:会，默认颜色为黑色 Firefox: 会。默认颜色为黑色。

实验六、假设一个div没有指定宽度和高度，那么这个div在浏览器中会是什么形状？

结果：IE7:宽度为100%,高度为0 。Firefox:宽度为100%,高度为0。

实验七、假设一个div指定了宽度。没有指定高度，那么这个div在浏览器中会是什么形状？

结果：IE7:有一定的高度。Firefox:高度为0。

实验八、两个父子关系的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;

实验九、假设一个div未指定其在页面中的对齐方式。那么它在页面中的位置如何？

结果：IE7:左对齐；Firefox:左对齐。

实验十、两个父子关系div，#father，#son 假设在father中指定text-align=center那么son在浏览器的位置如何？

结果：IE7:相对father居中对齐。Firefox:相对father左对齐。