zoukankan      html  css  js  c++  java
  • IE6/IE7下:inline-block解决方案(转)

    原文地址:http://blog.sina.com.cn/s/blog_60b35e8301019hk2.html

    1、inline元素(比如span,em等)的display属性设置为inline-block时,所有的浏览器都支持;
    2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
    直接贴代码:
    <div class="list">
      <span>无标题文档无标题文档</span>
      <span>无标题文档无标题文档</span>
      <span>无标题文档无标题文档</span>
      <span>无标题文档无标题文档</span>
    </div>
    <ul class="list1">
      <li>无标题文档无标题文档</li>
      <li>无标题文档无标题文档</li>
      <li>无标题文档无标题文档</li>
      <li>无标题文档无标题文档</li>
      <li>无标题文档无标题文档</li>
    </ul>
    .list{350px; border:1px solid #ccc;}
    .list span{display:inline-block;150px; margin-left:20px;}
    .list1{500px;border:1px solid #CCC; margin-top:20px;}
    .list1 li{display:inline-block; 150px; }
    IE6/IE7下:inline-block解决方案
    图1(ff/ie8-ie10等浏览器中的效果)
    IE6/IE7下:inline-block解决方案
    图2(ie6和ie7中的效果)
    由上面两个图可以看出,如果是内联元素使用了inline-block,那所有的浏览器显示都是正常的。(ie6、ie7中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。)
    但是如果是块级元素使用了inline-block,那在ie6和ie7中是有问题的。(ie6/ie7中块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会像火狐等其他浏览器块元素呈递为内联对象。)
    那么,ie6/ie7下块元素如何实现display:inline-block的效果?解决方法如下:
    让标准浏览器识别display:inline-block;让ie6/7识别display:inline;来覆盖上面的display:inline-block;然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。
    .list1 li{display:inline-block; 150px; *zoom:1;*display:inline;}
    加上*zoom:1(触发ie6和ie7下的haslayout);*display:inline(只有ie6和ie7识别);
    注:一定要加在
    display:inline-block;后面。
  • 相关阅读:
    e621. Activating a Keystroke When Any Child Component Has Focus
    e587. Filling Basic Shapes
    e591. Drawing Simple Text
    e595. Drawing an Image
    e586. Drawing Simple Shapes
    e636. Listening to All Key Events Before Delivery to Focused Component
    在 PL/SQL 块的哪部分可以对初始变量赋予新值? (选择1项)
    Oracle数据库中,在SQL语句中连接字符串的方法是哪个?(选择1项)
    你判断下面语句,有什么作用?(单选)
    Oracle数据库表空间与数据文件的关系描述正确的是( )
  • 原文地址:https://www.cnblogs.com/zhenzhong/p/4150838.html
Copyright © 2011-2022 走看看