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

HTML5 专栏收录该内容
51 篇文章 2 订阅

对所有的块元素都没有意义,块元素的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>

 

<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; width:150px; height:150px; border:10px solid green;}
</style>

 

<div class="class2">测试2</div>

 

测试结果:

          

在谷歌上运行的结果                在IE上运行的结果

 

可以看见,谷歌和IE中,该模块的高度一致了,都是150px,只是宽度不同,谷歌的宽度是170px,IE的宽度是150px。但是仅仅是高度一样是远远不够的,我们想要的最终结果是在两种浏览器中显示的结果保持一致,那么还要怎么做呢?

 

步骤二,在最外面套一个类然后定义宽度。

 

测试3:

<style>
.class1 {width:150px;}
.class2 {display:table-cell; background-color:#e4f39e; width:150px; height:150px; border:10px solid green;}


</style>

<div class="class1"><div class="class2">测试3</div></div>

 

测试结果:        

          

在谷歌上运行的结果                在IE上运行的结果


现在在两个浏览器上显示的是一样的了。方法是再声明一个类,定义你想要得到的宽度,在这里即是150px,然后套在最外层。定义宽度就好了,高度就没必要定义了。


以上结果适用于各种版本的IE浏览器


文章链接,点击这里

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 扫一扫,分享海报

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值