对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过。
===========================
多罗嗦一句:
display:block;比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。你可以实际写几行简单代码感受一下。
===========================
是不是div里就没有必要写display:block呢?通常情况下是没有必要的。
常见的特殊情况:之前曾对div设置过display:hidden。
IE和谷歌浏览器在display的边框显示不一样的解决办法
做网页的人可能都曾经遇到这个问题,废话不多说,先看例子。
测试1:
<style>
.class2 {display:block; background-color:#e4f39e; 150px; height:150px; border:10px solid green;}
</style>
<div class="class2">测试1</div>
测试结果:
在谷歌上运行的结果 在IE上运行的结果
可以很明显的看到,明明是同一段代码却产生不同的结果,这对我们这些做网站的人来说是很蛋疼的,这就是所谓的兼容性问题。
在测试1中,我们用了display:block 这个属性,在谷歌浏览器中,display:block和border这两个属性的width值和height值会相加,即:外框是10px X 2(左右边框各10像素)+内框150px,总大小就是10px X 2+150px=170px,宽就是170px,高就是170px。
而在IE浏览器中,display:block和border这两个属性的width值和height值会重叠在一起,总大小就会是原来的大小,即:宽150px,高150px。
那么,怎么解决这个兼容性问题呢?我们先假设测试1中,在IE上运行的才是我们想要的结果,要让在谷歌浏览器中运行的结果跟在IE上运行的结果一样。
步骤一,把display:block改为display:table-cell
测试2:
<style>
.class2 {display:table-cell; background-color:#e4f39e; 150px; height:150px; border:10px solid green;}
</style>
<div class="class2">测试2</div>
测试结果:
在谷歌上运行的结果 在IE上运行的结果
可以看见,谷歌和IE中,该模块的高度一致了,都是150px,只是宽度不同,谷歌的宽度是170px,IE的宽度是150px。但是仅仅是高度一样是远远不够的,我们想要的最终结果是在两种浏览器中显示的结果保持一致,那么还要怎么做呢?
步骤二,在最外面套一个类然后定义宽度。
测试3:
<style>
.class1 {150px;}
.class2 {display:table-cell; background-color:#e4f39e; 150px; height:150px; border:10px solid green;}
</style>
<div class="class1"><div class="class2">测试3</div></div>
测试结果:
在谷歌上运行的结果 在IE上运行的结果
现在在两个浏览器上显示的是一样的了。方法是再声明一个类,定义你想要得到的宽度,在这里即是150px,然后套在最外层。定义宽度就好了,高度就没必要定义了。
以上结果适用于各种版本的IE浏览器