最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

合集下载

课题_CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

CSS兼容IE6 IE7 IE8 IE9 Firefox的总结<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>无标题页</title><style type="text/css">#div{/* 一：*各种浏览器css hack兼容情况*/width:200px;height:200px;background: red; /* 所有浏览器*//* background: black!important; /* 有ie7,ie8,ie9,,firefox,chrome支持*//* _background: yellow; /* 只有ie6支持*//* +background:yellow; /* 只有ie6,ie7支持*//* *+background:yellow; /* 只有ie6,ie7支持*//* *background:black; /* 只有ie6,ie7支持*//* background:yellow\9; /* 有ie6,ie7,ie8,ie9支持*//* background:black\0; /* 有ie8,ie9支持*/}/* body:nth-of-type(1) div /* 有ie9,firefox,chrome,Safari支持*//*{width: 200px;height: 200px;background: red;}*//* 二：其他说明1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv="x-ua-compatible" content="ie=7" />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

最全的CSS浏览器兼容问题整理（IE6.0、IE7.0与FireFox）（收藏）

最全的CSS浏览器兼容问题整理（IE6.0、IE7.0与FireFox）（收藏）CSS 对浏览器的兼容性有时让⼈很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从⽹上收集了IE7,6与Fireofx的兼容性处理⽅法并整理了⼀下.对于web2.0的过度,请尽量⽤xhtml格式写代码,⽽且DOCTYPE 影响 CSS 处理,作为W3C的标准,⼀定要加DOCTYPE声名.常见问题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的情况来使。

CSS各浏览器兼容问题整理

目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{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等)。

浏览器兼容性问题归总

ie7.0与ie6.0的之间不兼容，目前就我知道的有如下几个方面，如有遗漏或者说错了的地方，欢迎在后面补充或者纠正。
1. ie7,ie6 div+css出现宽度定义不同在宽度定义上出现宽度的解释不同,IE7宽度在IE6上要宽一些,,正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服 IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model 所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
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*/}
Quote div.content { width:400px; //这个是错误的width，所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 } html>body .content { //html>body是CSS2的写法 width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 } 现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢？看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果 Quote div.content { width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 } html>body .content { //html>body是CSS2的写法 width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 } 同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box

CSS浏览器兼容性常见问题总结大全（推荐）

CSS浏览器兼容性常见问题总结⼤全（推荐）DIV＋CSS设计IE6、IE7、FF 兼容性DIV＋CSS⽹页布局这是⼀种趋势,我也开始顺应这股趋势了,不过在使⽤DIV＋CSS⽹站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使⽤DIV+CSS设计的⽹页，就应该更注意IE6 IE7 FF对CSS样式的兼容.什么是浏览器兼容：当我们使⽤不同的浏览器（Firefox IE7 IE6）访问同⼀个⽹站，或者页⾯的时候，会出现⼀些不兼容的问题，在这种浏览器下显⽰正常，在另⼀种下就乱了，我们在编写CSS的时候会很恼⽕，刚修复了这个浏览器的问题，结果另外⼀个浏览器却出了新问题。

⼀、!important (功能有限)随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 103px; /* IE6 */}⼆、CSS HACK的⽅法⾸先需要知道的是：所有浏览器通⽤ height: 100px;IE6 专⽤ _height: 100px;IE7 专⽤ *+height: 100px;IE6、IE7 共⽤ *height: 100px;IE7、FF 共⽤ height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下⾯的这种⽅法⽐较简单举⼏个例⼦：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个⽤上⾯说的第⼀种⽅法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。

css浏览器兼容问题

浏览器兼容性问题1.默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*{margin:0;padding:0;}2.水平居中的问题问题：设置 text-align: centerie6-7文本居中，嵌套的块元素也会居中ff /opera /safari /ie8文本会居中，嵌套块不会居中解决：块元素设置1、margin-left:auto;margin-right:auto2、margin:0 auto;3、<div align=”center”></d iv>3.垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。

例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中解决：给容器设置一个与其高度相同的行高line-height:与容器的height一样4.关于高度问题问题：如果是动态地添加内容，高度最好不要定义。

浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框解决：1.设置overflow:hidden;2.高度自增height:auto!important;height:100px;5. IE6默认的div高度问题：ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度解决：为这个容器设置下列属性之一1、设置overflow:hidden;2、设置line-height:1px;3、设置zoom:0.086. IE6最小高度(宽度)的问题问题：ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。

解决：使用ie6不支持但其余浏览器支持的属性!important。

css浏览器兼容性

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 下面根本等于没有设置宽度和高度。

CSS多浏览器兼容性问题及解决方案

CSS多浏览器兼容性问题及解决方案CSS多浏览器兼容性问题及解决方案兼容性处理要点1、DOCTYPE影响CSS处理2、FF:设置padding后，div会增加height和width，但IE不会，故需要用!important多设一个height和width3、FF:支持!important，IE则忽略，可用!important为FF特别设置样式4、div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

缺点是要控制内容不要换行5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;浏览器差异1、ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。

[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none 才能去除列表编号或圆点。

也就是说，在IE中仅仅设置margin:0px 即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与FireFox)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> 放到<body> 标签下，然后为div指定一个类, 然后CSS这样设计：#container{ min-width: 600px;width:expression(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; //这句是关键}<div id="box"><div id="left"></div><div id="right"></div></div>7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。

页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。

(其中floatA、floatB的属性已经设置为float:left这段代码在IE中毫无问题，问题出在FF。

原因是NOTfloatC并非float标签，必须将float标签闭合。

在<#div class=”floatB”> <#divclass=”NOTfloatC”>之间加上< #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可： .clear{ clear:both;}②作为外部wrapper 的div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n 栏的float div后面做一个统一的背景,譬如:<div id=”page”><div id=”left”></div><div id=”center”></div><div id=”right”></div></div>比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决<div id=”page”><div id=”bg” style=”float:left;width:100%”><div id=”left”></div><div id=”center”></div><div id=”right”></div></div></div>再嵌入一个float left而宽度是100%的DIV解决之④万能float 闭合(非常重要!)关于clear float 的原理可参见[How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽./* Clear Fix */.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix { display:inline-block; }/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：#box {background-color：#eee; }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }<div id="box"><p>p对象中的内容</p></div>解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.13.如何对齐文本与文本输入框加上vertical-align:middle;<style type="text/css"></style>14.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.二.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单. 15. LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器<style type="text/css"></style>16.为什么web标准中IE无法设置滚动条颜色了解决办法是将body换成html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta http-equiv="Content-Type" c /><style type="text/css"></style>17.为什么无法定义1px左右高度的容器IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px18.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二<style type="text/css"></style>。