搜档网
当前位置:搜档网 › CSS解决垂直居中问题的解决

CSS解决垂直居中问题的解决

CSS解决垂直居中问题的解决

垂直居中问题解决的几种方法:

方法1:使用box model

1.设置父元素:

display: -webkit-box;

-webkit-box-align: center;/*垂直方向对于空间分布在两侧*/

-webkit-box-pack: center;/*水平方向多余空间分布在两侧*/

2.子元素设置宽高,且display:block即可垂直居中显示

|如只想水平或垂直居中,设置父元素中一项即可

方法2:使用transform以及left和top

1.设置父元素position:relative

2.设置子元素属性如下

position:relative|absolute Tips:如设置fixed则相对body垂直居中

top:50%

left:50%

transform:translate(-50%,-50%);

Tip:必须设置父元素的高度大于等于子元素的高度!当然也别忘了设置子元素的宽和高,display为block。

Tip:操作top,left和transfrom的值可以实现多种定位

方法3:使用display:table-cell:使用这种方法一般是为了让文字居中

1.设置父元素

display:table-cell

vertical-align:middle /*设置垂直居中*/

|设置高度和宽度

2.子元素可以是任意一个display:block

Tips:不要设置子元素的宽和高,让文本或图片自动填充即可

Tips:如需水平居中,记得在子元素写上style="text-align:center"

方法4:设置line-height和父元素等高,这种方法就不介绍了

如何编写兼容多浏览器的CSS代码

一个优秀的网站要尽量兼容所有浏览器,但由于浏览器类型多样(IE 5, IE 6, IE7, IE 8, Firefox, Chrome, Safari),以及浏览器对CSS高版本的支持问题,这就给网页开发者带来诸多困难。 为了降低网页开发者寻找解决方案及编写代码的时间,我们收集了一些方法,以期能缩短开发时间,挺高网页在多浏览器中的兼容性。 IE浏览器兼容性解决方案 通过使用IE中的条件注释(Conditional comments)。 条件注释只能用于IE 5以后版本的浏览器,其他类型的浏览器将会忽略此注释。如果你安装了多个IE,条件注释(Conditional comments)将会以最高版本的 IE为标准。 条件注释(Conditional comments)示例: 条件注释(Conditional comments)说明: 1.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的 浏览器将会把它们看作是普通的注释而完全忽略它们。 2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释 里的内容。 3.条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里, 而不能在CSS文件中使用。 我们来测试一下条件注释(Conditional comments)的实际效果。 代码如下: 注:gt代表大于, lte代表小于或等于。 预览条件注释(Conditional comments)的实际效果 重置CSS各个元素的属性值 由于各个浏览器对CSS元素默认的属性值进行解析时,可能有所差异,所以我们尽量重置所需的CSS元素的属性值(CSS reset styles)。 我们常见如下所示的重置CSS默认属性值的代码: * { margin: 0; padding: 0; } 但是仅对margin和padding重置也许远远不够,下面的代码对常用的CSS元素进行了重置。 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;

兼容各个浏览器的纯CSS圆角代码

兼容各个浏览器的纯CSS圆角代码 无标题文档 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 代码: 注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明: 代码: 二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对, 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽. 代码: ********************************************************************* ************************************************** 三、其他兼容技巧(相当有用) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不 会.(可用!important解决)

Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表 1. 此汇总表中测试浏览器的版本为: 微软系统自带:IE6、IE7、IE8 火狐:Firefox 3.6.6 Safari:Safari 5.0 谷歌浏览器:Chrome 6.0.458.1 dev Opera浏览器:Opera 10.60 2. 其中,多数CSS hack是在selector{property:value;}基础上更改的。 selector代表CSS选择器,property代表CSS特性,value代表特性的值。 3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera 4. Q代表Quirks Mode,S代表Standards Mode。 5. Hack Type列的数字,指的是上面CSS hack的实现方式中的列表号。 1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit 特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术,是用兼容性问题去解决兼容性问题,无异于饮鸩止渴。切莫一有兼容性问题就使用,时刻记得改掉用CSS hack修补的问题。 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「_」 【示例】: #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS 语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】:「*」、「_」 【示例】: #divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取

CSS浏览器兼容性的各种代码解决方案

CSS浏览器兼容性的各种代码解决方案 https://www.sodocs.net/doc/5e1279159.html,/webds/blog/item/0fc34990dbef5a8ba877a4d1.html 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。 一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用的较频繁的CSS Hack技巧: 用的最广莫过于!important了,它可以针对IE(IE 7.0能正确理解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异,我都会使 用!important。 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >body select {…} 这句与上一句的作用相同。 5、仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 6、仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽 IE5.5 7、仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} }

最全整理浏览器兼容性问题与解决方案样本

常用浏览器兼容性问题与解决方案所谓浏览器兼容性问题,是指由于不同浏览器对同一段代码有不同解析,导致页面显示效果不统一状况。在大多数状况下,咱们需求是,无论顾客用什么浏览器来查看咱们网站或者登陆咱们系统,都应当是统一显示效果。因此浏览器兼容性问题是前端开发人员经常会遇到和必要要解决问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精准按照设计图开发前端开发人员,可以说是精准到1px,她们很容易就会发现设计图局限性,并且在很少状况下会遇到浏览器兼容性问题,而这些问题往往都死浏览器bug,并且她们制作页面后期易维护,代码重用问题少,可以说是比较牢固放心代码。 第二类是基本按照设计图来开发前端开发人员,诸多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果实现也是重复调试得到,详细为什么浮现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这样写还不知因此然。此类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一种浏览器。改来改去也毫无头绪。其实她们遇到兼容性问题大某些不应当归咎于浏览器,而是她们技术自身了。 文章重要针对是第一类,严谨型开发人员,因而这里重要从浏览器解析差别角度来分析兼容性问题。 浏览器兼容问题一:不同浏览器标签默认外补丁和内补丁不同 问题症状:随便写几种标签,不加样式控制状况下,各自margin 和padding差别较大。 遇到频率:100% 解决方案:CSS里*

备注:这个是最常用也是最易解决一种浏览器兼容性问题,几乎所有CSS文献开头都会用通配符*来设立各个标签内外补丁是0。 浏览器兼容问题二:块属性标签float后,又有横行margin状况下,在IE6显示margin比设立大 问题症状:常用症状是IE6中背面一块被顶到下一行 遇到频率:90%(稍微复杂点页面都会遇到,float布局最常用浏览器兼容问题)解决方案:在float标签样式控制中加入display:inline;将其转化为行内属性 备注:咱们最惯用就是div+CSS布局了,而div就是一种典型块属性标签,横向布局时候咱们普通都是用div float实现,横向间距设立如果用margin实现,这就是一种必然会遇到兼容性问题。 浏览器兼容问题三:设立较小高度标签(普通不大于10px),在IE6,IE7,遨游中高度超过自己设立高度 问题症状:IE6、7和遨游里这个标签高度不受控制,超过自己设立高度 遇到频率:60% 解决方案:给超过高度标签设立overflow:hidden;或者设立行高line-height 不大于你设立高度。 备注:这种状况普通出当前咱们设立小圆角背景标签里。浮现这个问题因素是IE8之前浏览器都会给标签一种最小默认行高高度。虽然你标签是空,这个标签高度还是会达到默认行高。 浏览器兼容问题四:行内属性标签,设立display:block后采用float布局,又有横行margin状况,IE6间距bug 问题症状:IE6里间距比超过设立间距 遇到几率:20%

解决CSS 兼容性问题

解决CSS 兼容性问题 如果你经常使用CSS3 实现一些炫酷的效果,比如使用 transition 实现让一个div 慢慢变宽的动效,你一定会为了兼容各个高级浏览器而这样写你的CSS 代码: 1.#box { 2.width: 200 px; 3.height: 200 px; 4.-moz-transition: al l2s ease 0s; 5.-webkit-transition: all 2s ease 0s; 6.-o-transition: all 2s ease 0s; 7.} 8.#box:hover { 9.width: 800 px; 10.} 复制代码 在 Internet Explorer 10 上你也可以使用 CSS3 实现这个效果了,只需要为#box 添加一行代码:-ms-transition: all 2s ease 0s; 下面列举出几个典型的需要兼容 Internet Explorer 10 的CSS3 特性: 1. 3D 转换 Internet Explorer 10 和 Windows 8 中使用 JavaScript 的 Modern UI 风格的应用引入了对 CSS3 3D 转换的支持。Internet Explorer 9 增加了对 CSS3 2D 转换的支持,使用JavaScript 的 Modern UI 风格的应用也同样支持它们。转换支持包括变换、旋转以及2D 和3D 空间中的元素拉伸,这些转换无需插件。 为了实现CSS 转换,需要使用-ms-transform 属性定义一个或多个转换函数。例如,以下代码段是一个选择器,它将一个2D 偏移函数和一个3D 旋转函数同时应用于一个div 元素。 1.div { 2.... 3.-ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg); 4.} 复制代码

Windows系统下各浏览器兼容性

Win dows系统下各浏览器常用CSS HAC汇总表 Hack ________________________ iJ/pe "-Hitml sei ec tori 1 *html selector 1 _prop erty :value 1 -property: valued 1 html* Beiector| 1 "property; value 1 property: valued 1 selector, c-moz-^ny-linkG -. 2 selector^ xz-moz-any-link^ < moz-document y fl-prefix(){ (2) htrnl>/=t*/body selector, x:-moz-^ any-link htrril^^^body SQkctDQ K:~moz' ? any-link, x:def3ult{+H:} 娄 二空屛头的.H舉険特百扩辰務式…..…2 ^irimdid seitan drid (-widtjkie min-dE vice-pixekratio:0)电… U;webkit开头的畑bkit測览器持有扩展样戒2 dnwbiw ail and ('webkit-miri'device-| pixal-ratio; 10000)* not all and 2 (-webkit- min-device-pixel-ratio: Ch Sa Op 1E6IE7iEd...— FF 1. 此汇总表中测试浏览器的版本为: 微软系统自带:IE6、IE7、IE8 火狐:Firefox 3.6.6 Safari : Safari 5.0 谷歌浏览器:Chrome 6.0.458.1 dev Opera 浏览器:Opera 10.60 2. 其中,多数CSS hack 是在selector{property:value;} 基础上更改的。 selector代表CSS选择器,property 代表CSS特性,value代表特性的值。 3. FF 代表Firefox ,Ch 代表Chorme ,Sa 代表Safari ,Op 代表Opera 4. Q 代表Quirks Mode ,S 代表Standards Mode 。 5. Hack Type 列的数字,指的是上面CSS hack的实现方式中的列表号。 1是指利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit 特有的扩展样式实现的hack。

div+css浏览器兼容问题解决方法

div+css浏览器兼容问题解决方法 从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧 1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如:<#div id=”imfloat”> 相应的css为#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 3.浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果diplay:table; 4 IE与宽度和高度的问题IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 5.页面的最小宽度min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

放到 标签下,然后为div指定一个类, 然后CSS这样设计:#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width 是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

HTML兼容性问题

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以 8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 9.在 mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法! important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx! important; 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题 注意事项: 1、float的div一定要闭合。 例如:(其中floatA、floatB的属性已经设置为float:left;) <#div id=”floatA” > <#div id=”floatB” > <#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float 标签,必须将float标签闭合。 在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear{clear:both;}此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box 的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。例如某一个wrapper

如何解决不同浏览器之间的兼容性问题

如何解决不同浏览器之间的兼容性问题 常见的浏览器兼容性问题与解决方案大致有以下九种形式: 一、不同浏览器的标签默认的外边界和内填充不同 问题表现:不加样式控制下,margin和padding差异较大 解决方案:css里*{margin:0; padding:0;} 备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0 二、块属性标签float后,又有横向的margin情况下,在IE6显示mar gin比设置的大 问题表现:IE6后面的一块被顶到下一行 解决方案:在float的标签样式控制中加入display:inline;转化为行内属性 备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题 三、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值

问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-he ight小于你设置的高度 备注:一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。 四、行内属性标签,设置display:block后采用float布局,又有横向的m argin情况,IE6间距bug 问题表现:IE6的间距比超过设置的间距 解决方案:在display:block;后面加入display:inline;display:table; 备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。由于设置为display:inline,高度失效,所有在后面补上display:table。 五、图片默认有间距

完美解决Css 盒模型的四大兼容性问题

完美解决Css 盒模型的四大兼容性问题 Css盒模型包括6个基本属性,其中width和height属性定义内容区域的宽度和高度,在内容区域的外面包括了三层界面属性---------padding,border,margin,在使用这个盒内使用background属性填充padding和内容区域的背景。 现在基本上所以的浏览器都主动向css标准靠拢,在支持css2 css3方面都有很多努力。在微软推出ie8以上的版本中可以说是彻底的支持了css2标准。 下面我们介绍一下几个盒模型应用时经常遇到的几个问题 1 ie元素浮动时边界误差问题 在ie6浏览器预览浮动元素时,浮动的边界实际显示为指定边界的2倍,对于ie6边界的显示错误,我们可以设置浮动元素的display属性为inline,这样就可以避免边界加倍显示的问题。 2 非ie浏览器中怎么让父级元素适应子元素高度 在非ie浏览器中,怎么让父级元素的高度随子元素的高度自适应变化呢? 首先我们需要定义父级元素的overflow属性,并且显示声明父级元素自适应调整陶都。我们来看看目前哪些浏览器能解析自适应高度,非ie浏览器如opera,ntescape,firefox这些都不能够解析,而ie7取消了元素高度自适应;所以,我们为了实现自适应高度,应该增加overflow:auto的声明,但为了与ie不同版本解析兼容,我们还必须增加一个辅助元素,定义clear:both属性,这样就强制了元素的高度。 3 元素低边界不被解析 在css规定中,没有定义float属性的父元素不会自动计算高度,要让其计算出高度,就必须在子元素的最后添加一个辅助元素,并且设置clear:both。所以,我们不能设置父元素overflow:auto属性,而是要设置成父元素浮动属性float:left或者float:right.

htmldivcss常见的浏览器兼容问题及解决方法(很全)

div+css教程之常见的浏览器兼容问题及解决方法 1.图片下方出现几像素的空白间隙 问题说明:这个问题在ie6和ff(火狐)下经常见到,例如

这个图片下面会有一条空白间隙, 解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align: top;} 2.IE6双倍margin的BUG(双边距) 问题说明:这是ie6一个著名的bug,当一个元素向一边浮动时,其它同一个方向如果有margin的话,ie6就会产生双倍的margin。例如:
在ie6下显示会有margin-left:20px的距离解决方法:加个_display:inline:属性,例如
3.ie6下的浮动元素和非浮动元素间出现3像素BUG 问题说明:这也是ie6一个著名的bug,当一个元素浮动时,同级别的文字没有 浮动,在ie6下它们之间就会产生3个像素的bug。例如:
摘要摘要摘要摘要
,图片和文字就会出现3像素 解决方法:方法一,两个元素都浮动,如:
摘要摘要摘要摘要
;方法二,这种设计时一般图片和文字要有间隙的,做个ie6的hack就行,如:
摘要摘要摘要摘要
4.li在IE中底部空行 问题说明:当li里面有两个以上的浮动元素时,li的下面就会产生一条空白间隙,例如 解决方法:这个问题和第一个问题很相似,解决方法也是一样,在li上加个垂直方向的属性,例如:

    史上最全的css兼容代码大全

    一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签. 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明: 二、万能float 闭合 关于clear float 的原理可参见[How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.