css兼容性整理，水平、垂直居中等

最新推荐文章于 2024-04-22 16:58:34 发布

小哥-晓戈

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量481

点赞数

分类专栏： html&css 文章标签： css 浏览器 float ie div chrome

本文链接：https://blog.csdn.net/zhengyinhui100/article/details/7936443

版权

html&css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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 一定要

方法二 ：

使用绝对定位的 div ，把它的 top 设置为 50 ％， margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto ，这样如果 content 太多的话，就会出现滚动条，以免 content 溢出。

<div class="content">
Content goes here</div>

#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

优点：

适用于所有浏览器
不需要嵌套标签

缺点：

没有足够空间时， content 会消失 ( 类似 div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况 )

2兼容性整理

2.1 chrome下font-size小于 12px无效

当样式表里 font-size 小于 12px 时， chrome 浏览器里字体显示仍为 12px

第一种（推荐）：
Css 代码
html{-webkit-text-size-adjust:none;}

第二种：
在 chrome 浏览器工具栏选项 > 高级选项 > 更改字体和语言设置 > 语言 > 谷歌浏览器语言设置改为 English

2.2 IE6、7下 POSITION:RELATIVE不滚动

父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。

解决办法：

给设置了overflow:auto属性的父容器也加上position:relative。

2.3 IE6下float元素换行

当非 float 的元素和 float 的元素在一起的时候，如果非 float 元素在先，那么 float 的元素将被排斥

<div> 我不 float
<span class="right"> 我 float ： right</span>
</div>
也就是说，你的 span 是 float:right ，但是你文本还是 float:none

如果要让两者占据同一行，一般有两个解决方法 :

第一种：把 span 先于文本显示；第二：把文本也设成 float 。

2.4 z-index问题

当定位元素的 'z-index' 未设置时（默认为 auto ），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

body { margin:0; }

.p1{ top:20px; height:50px; width:150px; background-color:blue;}

.p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}

.p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}

</style>

<div style="position:relative;" class="p1">1

</div>

$C:\Users\acer\Desktop\2012022921011169.jpg$

而在 IE6 IE7 E8(Q) 下，定位元素【 p1 】和【 p3 】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【 p3 】在【 p1 】之后，所以在 Z 轴上【 p3 】比【 p1 】靠前显示。此时，由于【 p2 】处于【 p1 】的层叠上下文中，所以【 p2 】在 Z 轴上要比【 p3 】靠后。

在 IE6 下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative 或 absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在 IE6 下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。

http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html

解决方法有三， 1 、 position:relative 改为 position:absolute ； 2 、去除浮动； 3 、浮动元素添加 position 属性（如 relative ， absolute 等）。

2.5 float问题

1. IE7 中，底边距 bug 是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉；

　　 2. 3 像素间距是指挨着浮动元素的文本会神奇的被踢出去 3 像素，好像浮动元素的周围有一个奇怪的力场一样；

　　 3. 双倍边距 bug 处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距 (margin) ，会引发双倍边距。

2.6 haslayout引起的IE6 :hover失效

a:hover { }

a:hover span{color:#F00;}

</style>

<body>

<a href="#"> 鼠标经过时改变我的 <span> 颜色 </span></a>

</body>

在 IE6 下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发 a:hover 的 layout ，例如 a:hover { display:inline-block} 或者 a:hover { zoom:1} 等等。

2.7 inline-block元素间间距

使用 inline-block 会使除 IE6/7 外的浏览器的元素之间有 3 或 4px 的间隔。

解决办法：

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉 HTML 中的空格，自然间距就木有了。

2.8 IE6下百分比高度无效

解决：设置具体高度值

3 异步加载css执行优先级

IE8 、 9 下按照加载时间顺序执行，其他浏览器则按 dom 节点顺序执行。

小哥-晓戈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css兼容性整理，水平、垂直居中等

1.常用代码整理1.1 水平居中div {margin-left: auto; margin-right: auto; }另外，如果你的 div还没有指定宽度（可以是相对的大小），这种 CSS居中写法也起不到应有的效果，解决办法是为这个 div指定一个width 宽度，例如： width:auto; 或者 width:50% 之类的。同时，你的页面类型即 document typ
复制链接

扫一扫