zoukankan      html  css  js  c++  java
  • 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已):

    /***********************************
    *兼容盒模型 by awen
    *使用float实现的,所以大家注意页面展现的dom排序和代码中是不一样的(float:right,你懂的)
    ************************************/
    .shbox-item-l, .shbox-item-r {
        min-height: 1px;
        /*防止标准浏览器下没有设置高度造成布局混乱*/
        _display:inline;
        /*hack ie6 dubble margin*/
    }
    .shbox-item-l {
        float: left;
    }
    .shbox-item-r {
        float: right;
    }
    /*强制换行*/
    .shbox-item_l, .shbox-item-r, .shbox-item-flex {
        word-wrap: break-word;
        word-break: normal;
    }
    /*模拟flex,一般标准的都是全部使用float,但是特殊情况可以使用flex,请注意
    * 1 一个box只支持一个flex
    * 2 flex中自定义margin是无效的
    * 3 使用flex后,ie6下,flex左右两个float需要解决3像素bug,
    * 	可以使用shbox-flex-l(对应flex左边的float),和shbox-flex-r(对应flex右边的float)两个样式;
    * 	当然不是很严谨的话也可以不用。
    */
    .shbox-item-flex {
        overflow:hidden;
        _height: 1%;/*for ie6 防止文档流包裹 也可以用这个:_display:inline-block;*/
    }
    /*
     *ie6下的flex可能会有3像素bug
    */
    .shbox-flex-l {
        _margin-right:-3px;
    }
    .shbox-flex-r {
        _margin-left:-3px;
    }
    

      

    下面看例子,当前页面也可以再ie下看效果,也可以下载 demo :

    • shbox-item-l

    • li2
    • li3
    • li4
    • li5
    • shbox-item-r

    • li2
    • li3
    • li4
    • li5

    shbox-item-r

    shbox-item-flex

    shbox-item-l
    shbox-item-r
    oooooooooooooooooooooooooooooooooo
  • 相关阅读:
    NUMBER BASE CONVERSION(进制转换)
    2776 寻找代表元(匈牙利算法)
    最长严格上子序列(二分优化)
    c++ bitset类的使用和简介
    笨小猴 2008年NOIP全国联赛提高组
    三国游戏 2010年NOIP全国联赛普及组
    全国信息学奥林匹克联赛(NOIP2014)复赛 模拟题Day2 长乐一中
    codevs 1704 卡片游戏
    热浪
    全国信息学奥林匹克联赛 ( NOIP2014) 复赛 模拟题 Day1 长乐一中
  • 原文地址:https://www.cnblogs.com/cczw/p/3487561.html
Copyright © 2011-2022 走看看