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

关于ie中实现弹性盒模型-我的css的更多相关文章

  1. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  2. 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  3. 弹性盒模型中flex-grow 和flex的区别

    在flex弹性盒模型体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 先来看下两个属 ...

  4. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  5. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  6. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  7. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  8. flexbox-CSS3弹性盒模型flexbox完整版教程

    原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...

  9. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

随机推荐

  1. LOL 战斗力查询

    LOL(英雄联盟) 战斗力查询 接口:http://lolbox.duowan.com/playerDetail.php?serverName=serverName&playerName=pl ...

  2. HTML-IE6复制BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...

  3. FFmpeg + SDL2 实现的视频播放器「视音频同步」

    文章转自:http://blog.csdn.net/i_scream_/article/details/52760033 日期:2016.10.8 作者:isshe github:github.com ...

  4. Android:EditText限制文字输入

    Android的编辑框控件EditText在平常编程时会经常用到,有时候会对编辑框增加某些限制,如限制只能输入数字,最大输入的文字个数,不能输入 一些非法字符等,这些需求有些可以使用android控件 ...

  5. 怎样给ExecutorService异步计算设置超时

    ExecutorService接口使用submit方法会返回一个Future<V>对象.Future表示异步计算的结果.它提供了检查计算是否完毕的方法,以等待计算的完毕,并获取计算的结果. ...

  6. 有道翻译 / 百度翻译Api

    比较推荐使用百度翻译api 不推荐有道翻译,比较水. http://ai.youdao.com/docs/doc-trans-api.s#p02 http://ai.youdao.com/docs/d ...

  7. Spark in meituan http://tech.meituan.com/spark-in-meituan.html

    Spark在美团的实践 忽略元数据末尾 回到原数据开始处 引言:Spark美团系列终于凑成三部曲了,Spark很强大应用很广泛, 文中Spark交互式开发平台和作业ETL模板的设计都很有启发借鉴意义. ...

  8. unity, do nothing的state

    要想在animator的stateMachine中建一个"doNothing",要注意:为了保证"doNothing"state能正常运转,不被无故跳过, Mo ...

  9. 使用c++的cocos2d-x-3.0rc1程序公布apk

    (如今cocos2dx-x-3.0正式版已经出了.之前用的cocos2d-x-3.0rc1,就先用这个版本号吧) 0. 完毕C++项目 在cmd下使用cocos.py new命令,然后习惯性的在win ...

  10. tornado长轮询

    1.什么是长轮询顾名思义,长轮询就是不停循环请求服务器,获取最新信息.长轮询分为两类:1)浏览器以固定时间间隔向服务器发送请求缺点是轮询频率要足够快,但又不能太频繁,否则当成百上千个客户端不断请求,会 ...