zoukankan      html  css  js  c++  java
  • 有关display:block、display:tablecell在IE、谷歌的兼容性问题

    对所有的块元素都没有意义,块元素的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和谷歌浏览器在display的边框显示不一样的解决办法          IE和谷歌浏览器在display的边框显示不一样的解决办法

    在谷歌上运行的结果                在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和谷歌浏览器在display的边框显示不一样的解决办法          IE和谷歌浏览器在display的边框显示不一样的解决办法

    在谷歌上运行的结果                在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和谷歌浏览器在display的边框显示不一样的解决办法          IE和谷歌浏览器在display的边框显示不一样的解决办法

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


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


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

  • 相关阅读:
    方维分享系统模板修改,book_share_list.htm调用用户数据,$_FANWE['user']的数据
    方维分享系统修改会员的积分设置
    方维分享系统二次开发,tip.htm,修改调用的当前用户的信息
    方维分享系统模板修改,删除操作增加提示
    模拟器分辨率
    android自定义menu,PopUpWindow弹出菜单
    Android popupWindow响应back按键并关闭
    Android开发技巧:ViewStub惰性装载
    android动态全屏切换
    Android程序对不同手机屏幕分辨率自适应的总结
  • 原文地址:https://www.cnblogs.com/lykbk/p/dfbfghfghfgh23445r324.html
Copyright © 2011-2022 走看看