关于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
关于ie中实现弹性盒模型-我的css的更多相关文章
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 弹性盒模型中flex-grow 和flex的区别
在flex弹性盒模型体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 先来看下两个属 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- css3弹性盒模型
一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
随机推荐
- 18-spring学习-利用Annotation配置AOP
之前是通过配置完成aop操作,如果自己写的话,太麻烦了,可以使用基于annotation的配置完成. 第一步:打开AOP的annotation支持 加上一句话: <context:annotat ...
- js无缝滚动,不平滑(求高人指点)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 名词解释:alpha版、beta版、rc版的意思(转)
很多软件在正式发布前都会发布一些预览版或者测试版,一般都叫“beta版”或者 “rc版”,特别是开源软件,甚至有“alpha版”,下面来解释一下各个版本的意思. alpha版:内部测试版.α是希腊字母 ...
- 位(bit)与字节(byte)
bit就是位,也叫比特位,是计算机表示数据最小的单位. byte就是字节,1byte=8bit,1byte就是1B: 一个字符=2字节: 1KB=1024B 一个英文字母,无论大写和小写都是一个字符: ...
- Linux操作系统中多线程的同步
1 互斥锁 互斥锁用来保证一段时间内只有一个线程在执行一段代码.必要性显而易见:假设各个线程向同一个文件顺序写入数据,最后得到的结果一定是灾难性的. 先看下面一段代码.这是一个读/写程序,它们公用一个 ...
- ADBport被占用,adb server is out of date
wd=adb&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdPWD1uyP-PHf1ryRYP1Nh0ZwV5Hcvrj ...
- [Linux]--解决虚拟机中安装ubuntu不能自适应的问题
这几天换了新的电脑,但是装上ubuntu mate以后就一直不能自适应窗口大小改变分辨率,奈何我是个强迫症,再加上也不想老师带着自己的笔记本跑动跑西的(主要是太重了...),于是今天花了一下午的时间找 ...
- 【HTML5 】手机重力与方向感应的应用——摇一摇效果
http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...
- C#中将图片转化成base64字符串
厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...
- AutoFac文档9(转载)
目录 开始 Registering components 控制范围和生命周期 用模块结构化Autofac xml配置 与.net集成 深入理解Autofac 指导 关于 词汇表 关系类型 Autofa ...