ie 和谷歌浏览器在display的边框显示不一样的解决办法

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,然后套在最外层，定义宽度就好了，高度没哟必要定义了。