有关display:block、display:table-cell在IE、谷歌的兼容性问题

解决display:block与border兼容性问题

最新推荐文章于 2022-11-23 18:15:12 发布

原创最新推荐文章于 2022-11-23 18:15:12 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html #css3 #python

本文介绍了解决在不同浏览器（如IE与Chrome）中使用display:block属性结合border时出现的显示差异问题的方法。通过调整display属性值并采用外部包裹元素的方式，实现了跨浏览器的一致性布局。

对所有的块元素都没有意义，块元素的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; width:150px; height:150px; border:10px solid green;}
</style>

测试结果：

在谷歌上运行的结果在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; width:150px; height:150px; border:10px solid green;}
</style>

测试结果：