eg1:
<style>
.class2{displau:block; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}
</style>
<div class="class2">测试</div>
result:
左侧是google上运行的结果 右侧是在ie上运行的结果
在eg1上,用了display:block这个属性,在google浏览器中,display:block和border这两个属性的width值和height值会相加,即:外框是10px 乘以2(左右边框各10像素)+内框150px,总大小是10px 乘以2+150px=170px,就是宽和高都是170px;
在ie浏览器中,display:block和border这两个属性的width值和height值会重叠在一起,总大小就会是原来的大小。即宽和高都是150px;
解决的方法:
第一种:把display:block改为display:table-cell
步骤一:
<style>
.class2{displau:table-cell; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}
</style>
<div class="class2">测试2</div>
运行的结果:
google上 ie 上
在google和ie上,该模块的高度一致了,都是150px,只是宽度不同,谷歌的宽度是170px;ie的宽度是150px;所以接下来
步骤二,在最外层套一个类然后定义宽度。
eg3:
<style>
.calss1{width:150px;}
.class2{displau:table-cell; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}
</style>
<div class="class1"><div class="class2">测试3</div></div>
google浏览器上 ie浏览器上
现在在这两个浏览器上显示的是一样的呢。方法是在声明一个类。定义你想要的宽度,在这里既是150px,然后套在最外层,定义宽度就好了,高度没哟必要定义了。
ie 和谷歌浏览器在display的边框显示不一样的解决办法