css兼容性整理,水平、垂直居中等
2012-09-03 09:50
429 查看
1.常用代码整理
1.1 水平居中
div {margin-left: auto; margin-right: auto; }
另外,如果你的 div还没有指定宽度(可以是相对的大小),这种 CSS居中写法也起不到应有的效果,解决办法是为这个 div指定一个width 宽度,例如: width:auto; 或者 width:50% 之类的。
同时,你的页面类型即 document type必须声明为xhtml 。至于松散还是严格都不影响。
这个写法也适用于图片 img和一些其他的盒状标签的 CSS居中。
最后,假如你在 IE和FireFox 两个浏览器中看起来不一样,你最好采用 text-align:center; 和 margin 两个 CSS居中一起设置的方法。例如:
#layout {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:首先在父级元素定义 TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于 IE这样设定就已经可以了。但在 mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上 “MARGIN-RIGHT:
auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个 DIV里,你可以依次拆出多个 div,只要在每个拆出的div里定义 MARGIN
-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
1.2垂直居中
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height和 height ,并使两值相等,再加上 over-flow:
hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持 <img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话, overflow:
hidden 一定要
[align=justify]方法二 :[/align]
[align=justify]使用绝对定位的 div,把它的 top 设置为 50%, margin-top设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。[/align]
[align=justify]因为有固定高度,或许你想给 content 指定 overflow:auto ,这样如果 content 太多的话,就会出现滚动条,以免 content 溢出。[/align]
<div class="content">
Content goes here</div>
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
[align=justify]优点 :[/align]
[align=justify]适用于所有浏览器
不需要嵌套标签[/align]
[align=justify]缺点 :[/align]
[align=justify]没有足够空间时, content 会消失( 类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况 )[/align]
2兼容性整理
2.1 chrome下font-size小于 12px无效
[align=justify]当样式表里 font-size小于12px 时,chrome浏览器里字体显示仍为 12px[/align]
第一种(推荐):
Css代码
html{-webkit-text-size-adjust:none;}
[align=justify]第二种:
在chrome浏览器工具栏 选项 > 高级选项 > 更改字体和语言设置 > 语言 > 谷歌浏览器语言 设置改为 English[/align]
2.2 IE6、7下 POSITION:RELATIVE不滚动
父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。
解决办法:
给设置了overflow:auto属性的父容器也加上position:relative。
2.3 IE6下float元素换行
[align=justify]当非 float的元素和float 的元素在一起的时候,如果非 float元素在先,那么float的元素将被排斥 [/align]
<div>我不float
<span class="right">我 float:right</span>
</div>
也就是说,你的 span是float:right ,但是你文本还是 float:none
[align=justify]如果要让两者占据同一行,一般有两个解决方法 :[/align]
[align=justify]第一种:把 span先于文本显示;第二:把文本也设成 float。[/align]
2.4 z-index问题
当定位元素的 'z-index' 未设置时(默认为 auto),在 IE6
IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下,则严格按照规范,不产生新的局部层叠上下文。
[align=justify]<style type="text/css">[/align]
[align=justify] body { margin:0; }[/align]
[align=justify] .p1{ top:20px; height:50px; width:150px; background-color:blue;}[/align]
[align=justify] .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}[/align]
[align=justify] .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}[/align]
[align=justify]</style>[/align]
[align=justify]<div style="position:relative;" class="p1">1[/align]
[align=justify] <div style="position:absolute; z-index:1;" class="p2">2</div>[/align]
[align=justify]</div>[/align]
[align=justify]<div style="position:absolute;" class="p3">3</div>[/align]
[align=justify][/align]
[align=justify]而在 IE6 IE7 E8(Q) 下,定位元素【 p1】和【p3 】都创建了新的局部层叠上下文,在同一根层叠上下文中,它们的层叠级别相同,但【 p3】在【p1 】之后,所以在 Z 轴上【p3 】比【p1】靠前显示。此时,由于【 p2】处于【p1 】的层叠上下文中,所以【 p2】在 Z 轴上要比【 p3】靠后。[/align]
[align=justify]在IE6 下的层级高低不仅要看本身,还要看自己的父元素是否给力:父元素的 position 属性为 relative或absolute 时,子元素的 absolute 属性是相对于父元素而言的。而在 IE6下的层级的表现有时候不是看子元素的 z-index 多高,而要看它们的父元素的 z-index 谁高谁低。[/align]
[align=justify]
[/align]
[align=justify]http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html[/align]
[align=justify]解决方法有三,1、 position:relative改为position:absolute ;2、去除浮动; 3、浮动元素添加position属性(如 relative,absolute 等)。[/align]
2.5 float问题
[align=justify]1. IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉;[/align]
[align=justify] 2. 3像素间距是指挨着浮动元素的文本会神奇的被踢出去 3像素,好像浮动元素的周围有一个奇怪的力场一样;[/align]
[align=justify] 3. 双倍边距bug 处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距 (margin),会引发双倍边距。[/align]
2.6 haslayout引起的IE6
:hover失效
[align=justify]<style type="text/css">[/align]
[align=justify]a:hover { }[/align]
[align=justify]a:hover span{color:#F00;}[/align]
[align=justify]</style>[/align]
[align=justify] <body>[/align]
[align=justify]<a href="#"> 鼠标经过时改变我的 <span>颜色</span></a>[/align]
[align=justify]</body>[/align]
在IE6下“颜色”根本就不会变成红色,其他浏览器都是好的,要解决这个问题就必须触发 a:hover的layout ,例如a:hover
{ display:inline-block}或者 a:hover
{ zoom:1}等等。
2.7 inline-block元素间间距
[align=justify]使用 inline-block会使除IE6/7 外的浏览器的元素之间有 3或4px 的间隔。[/align]
[align=justify]解决办法:[/align]
[align=justify]元素间留白间距出现的原因就是标签段之间的空格,因此,去掉 HTML中的空格,自然间距就木有了。[/align]
[align=justify]
[/align]
2.8 IE6下百分比高度无效
[align=justify]解决:设置具体高度值[/align]
[align=justify]
[/align]
3 异步加载css执行优先级
[align=justify]IE8、9 下按照加载时间顺序执行,其他浏览器则按 dom节点顺序执行。[/align]
1.1 水平居中
div {margin-left: auto; margin-right: auto; }
另外,如果你的 div还没有指定宽度(可以是相对的大小),这种 CSS居中写法也起不到应有的效果,解决办法是为这个 div指定一个width 宽度,例如: width:auto; 或者 width:50% 之类的。
同时,你的页面类型即 document type必须声明为xhtml 。至于松散还是严格都不影响。
这个写法也适用于图片 img和一些其他的盒状标签的 CSS居中。
最后,假如你在 IE和FireFox 两个浏览器中看起来不一样,你最好采用 text-align:center; 和 margin 两个 CSS居中一起设置的方法。例如:
#layout {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:首先在父级元素定义 TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于 IE这样设定就已经可以了。但在 mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上 “MARGIN-RIGHT:
auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个 DIV里,你可以依次拆出多个 div,只要在每个拆出的div里定义 MARGIN
-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
1.2垂直居中
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height和 height ,并使两值相等,再加上 over-flow:
hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持 <img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话, overflow:
hidden 一定要
[align=justify]方法二 :[/align]
[align=justify]使用绝对定位的 div,把它的 top 设置为 50%, margin-top设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。[/align]
[align=justify]因为有固定高度,或许你想给 content 指定 overflow:auto ,这样如果 content 太多的话,就会出现滚动条,以免 content 溢出。[/align]
<div class="content">
Content goes here</div>
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
[align=justify]优点 :[/align]
[align=justify]适用于所有浏览器
不需要嵌套标签[/align]
[align=justify]缺点 :[/align]
[align=justify]没有足够空间时, content 会消失( 类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况 )[/align]
2兼容性整理
2.1 chrome下font-size小于 12px无效
[align=justify]当样式表里 font-size小于12px 时,chrome浏览器里字体显示仍为 12px[/align]
第一种(推荐):
Css代码
html{-webkit-text-size-adjust:none;}
[align=justify]第二种:
在chrome浏览器工具栏 选项 > 高级选项 > 更改字体和语言设置 > 语言 > 谷歌浏览器语言 设置改为 English[/align]
2.2 IE6、7下 POSITION:RELATIVE不滚动
父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。
解决办法:
给设置了overflow:auto属性的父容器也加上position:relative。
2.3 IE6下float元素换行
[align=justify]当非 float的元素和float 的元素在一起的时候,如果非 float元素在先,那么float的元素将被排斥 [/align]
<div>我不float
<span class="right">我 float:right</span>
</div>
也就是说,你的 span是float:right ,但是你文本还是 float:none
[align=justify]如果要让两者占据同一行,一般有两个解决方法 :[/align]
[align=justify]第一种:把 span先于文本显示;第二:把文本也设成 float。[/align]
2.4 z-index问题
当定位元素的 'z-index' 未设置时(默认为 auto),在 IE6
IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下,则严格按照规范,不产生新的局部层叠上下文。
[align=justify]<style type="text/css">[/align]
[align=justify] body { margin:0; }[/align]
[align=justify] .p1{ top:20px; height:50px; width:150px; background-color:blue;}[/align]
[align=justify] .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}[/align]
[align=justify] .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}[/align]
[align=justify]</style>[/align]
[align=justify]<div style="position:relative;" class="p1">1[/align]
[align=justify] <div style="position:absolute; z-index:1;" class="p2">2</div>[/align]
[align=justify]</div>[/align]
[align=justify]<div style="position:absolute;" class="p3">3</div>[/align]
[align=justify][/align]
[align=justify]而在 IE6 IE7 E8(Q) 下,定位元素【 p1】和【p3 】都创建了新的局部层叠上下文,在同一根层叠上下文中,它们的层叠级别相同,但【 p3】在【p1 】之后,所以在 Z 轴上【p3 】比【p1】靠前显示。此时,由于【 p2】处于【p1 】的层叠上下文中,所以【 p2】在 Z 轴上要比【 p3】靠后。[/align]
[align=justify]在IE6 下的层级高低不仅要看本身,还要看自己的父元素是否给力:父元素的 position 属性为 relative或absolute 时,子元素的 absolute 属性是相对于父元素而言的。而在 IE6下的层级的表现有时候不是看子元素的 z-index 多高,而要看它们的父元素的 z-index 谁高谁低。[/align]
[align=justify]
[/align]
[align=justify]http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html[/align]
[align=justify]解决方法有三,1、 position:relative改为position:absolute ;2、去除浮动; 3、浮动元素添加position属性(如 relative,absolute 等)。[/align]
2.5 float问题
[align=justify]1. IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉;[/align]
[align=justify] 2. 3像素间距是指挨着浮动元素的文本会神奇的被踢出去 3像素,好像浮动元素的周围有一个奇怪的力场一样;[/align]
[align=justify] 3. 双倍边距bug 处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距 (margin),会引发双倍边距。[/align]
2.6 haslayout引起的IE6
:hover失效
[align=justify]<style type="text/css">[/align]
[align=justify]a:hover { }[/align]
[align=justify]a:hover span{color:#F00;}[/align]
[align=justify]</style>[/align]
[align=justify] <body>[/align]
[align=justify]<a href="#"> 鼠标经过时改变我的 <span>颜色</span></a>[/align]
[align=justify]</body>[/align]
在IE6下“颜色”根本就不会变成红色,其他浏览器都是好的,要解决这个问题就必须触发 a:hover的layout ,例如a:hover
{ display:inline-block}或者 a:hover
{ zoom:1}等等。
2.7 inline-block元素间间距
[align=justify]使用 inline-block会使除IE6/7 外的浏览器的元素之间有 3或4px 的间隔。[/align]
[align=justify]解决办法:[/align]
[align=justify]元素间留白间距出现的原因就是标签段之间的空格,因此,去掉 HTML中的空格,自然间距就木有了。[/align]
[align=justify]
[/align]
2.8 IE6下百分比高度无效
[align=justify]解决:设置具体高度值[/align]
[align=justify]
[/align]
3 异步加载css执行优先级
[align=justify]IE8、9 下按照加载时间顺序执行,其他浏览器则按 dom节点顺序执行。[/align]
相关文章推荐
- CSS布局——简洁、兼容性强的垂直水平居中方案
- css垂直水平居中的整理
- (转载)css垂直水平居中的整理
- CSS垂直水平居中方法整理
- css垂直水平居中的整理
- CSS中有关水平居中和垂直居中的解决办法
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- 收罗CSS布局中有关水平和垂直居中的N种方法
- css元素水平垂直居中的十种方法
- CSS实现div水平垂直居中
- 纯CSS完美实现垂直水平居中的6种方式
- CSS布局之水平垂直居中
- css水平和垂直居中
- CSS图片垂直居中方法整理集合 !
- css垂直水平居中
- 经典CSS坑:如何完美实现垂直水平居中?
- CSS图片垂直居中方法整理集合
- CSS布局——水平垂直居中布局总结学习
- css让div水平垂直居中,用弹性盒子
- CSS实现元素水平/垂直居中的方法