IE7IE8与FireFox等浏览器CSS兼
css_hack手册集合
简介目前，IE6和Firefox是网页用户常用的浏览器。
由于不同浏览器对CSS的支持和解析结果不同，同样的CSS代码有时会在不同的浏览器上显现出不同的网页效果。
在IE上测试完成的网页，用Firefox 打开却可能满篇混乱，表格错位了，文字间距不同了，代码功能也失效了，等等。
微软新出的IE7,8的变节更是让众多专业的Web designer头疼，Web开发者一直在呼吁抛弃不兼容Wbe标准的IE6浏览器，许多大型网站也采取行动屏蔽或要求IE6用户升级到Chrome、IE8或Firefox 3.5，但是微软那个臭不要脸的还一直嚷嚷会始至不渝支持IE6。
各种浏览器对CSS的解析都不一样，当然这并不是CSS的过错(尽管它还不是很完美)，于是我们想尽办法让不同的浏览器下显示的页面效果能一样，于是不停的写CSS。
这中间针对各个不同的浏览器去写不同的CSS的过程就叫CSS hack。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。
我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox 两个都不能认识。
等等书写顺序，一般是将识别能力强的浏览器的CSS写在后面。
下面如何写里面说得更详细些。
下面举例说明怎样书写CSS Hack。
1.这个例子控制网页背景在IE和Firefox中显示不同颜色。
虽然实际网页很少这样制作，但这是体验CSSHack控制能力的一个简单明了的好例子。
注：IE6可识别*，但无法识别!importantIE7可识别*，也可识别!importantFirefox无法识别*，但可识别!important注：IE6可识别*和下划线”_”IE7可识别*，无法识别下划线”_”Firefox无法识别*或下划线”_”2.这个例子控制网页页面宽度。
CSSHACK区分兼容ie5ie6ie7ff技巧,float闭合技巧（转载）...
CSSHACK区分兼容ie5ie6ie7ff技巧,float闭合技巧（转载）...一、CSS HACK以下两种方法几乎能解决现今部分HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持.#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed */}注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””“>”二、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 */三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.。
不用任何软件、扩展或插件,只要两步,IE也能轻松去广告!
不用任何软件、扩展或插件，只要两步，IE也能轻松去广告！看到一个ie去广告的方法，和以前不同的是，此方法不需要任何的插件，通过外置CSS的方法屏蔽网页内的广告。
可以实现不用任何软件、扩展或插件，轻松去掉IE的广告！使用方法1.下载NoAD.css (见结尾)，把NoAD.css 保存到C盘或其他地方（保存后请勿更换路径，否则失效）。
2.打开你的IE浏览器，选择“Internet选项”，点击“辅助功能”，勾选“使用样式表”，选择刚才保存NoAD.css的路径，单击确定。
如图所示：然后就是见证奇迹的时刻，以新浪首页为例。
导入后立刻生效，无需重启浏览器！效果十分明显，一些常用网站的广告都消失了，嘿嘿。
Q：这种去广告方法的原理是什么？A：原理是利用样式表（CSS）把网页中的广告隐藏起来——只是隐藏，并不能阻止广告的加载。
其他很多浏览器的去广告扩展其实都用到了CSS。
Q：这个方法能去掉所有网站的广告吗？A：这里提供了部分热门网站的过滤代码（由于太多就不一一列举了），你可以打开NoAD.css 看看具体有哪些网站。
如果你想去掉更多网站广告，可以自行编辑NoAD.css或联系站长帮你解决，当然也可以在下面留言。
Q：这个方法只能用在IE10、IE9？IE8、IE7、IE6能用吗？A：这个NoAD.css适用于IE10、IE9，部分适用于IE8，因为IE8对CSS的支持没IE9好。
IE7、IE6也能用，但效果可能会更差些，请自行测试。
Q：这个方法能不能去弹窗广告？A：不能，CSS只能改变网页内容，阻止不了弹窗。
Q：这个方法会不会拖慢网页的打开速度呢？A：几乎不会，比起去广告软件已经快多了。
当然如果你担心，可以把NoAD.css里面自己不上的网站的代码删掉。
深入理解CSS溢出overflow
深⼊理解CSS溢出overflow深⼊理解CSS溢出overflow⼀、总结⼀句话总结：overflow⽤于对溢出内容的处理。
1、overflow有哪5个常⽤参数，分别是什么意思？visible | hidden | scroll | auto | inheritvisible 元素的内容在元素框之外也可见auto 如果内容被剪裁，则浏览器会显⽰滚动条以便查看其余的内容scroll 元素的内容会在元素框的边界处剪裁，但浏览器会显⽰滚动条以便查看其余的内容hidden 元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见⼆、深⼊理解CSS溢出overflow前⾯的话 当⼀个元素固定为某个特定⼤⼩，但内容在元素中放不下。
此时就可以利⽤overflow属性来控制这种情况定义overflow溢出 值: visible | hidden | scroll | auto | inherit 初始值: visible 应⽤于: 块级元素、替换元素、表单元格 继承性: ⽆ [注意]除了IE7-浏览器外，其他浏览器都不⽀持给table-cell元素设置overflow属性。
firefox和IE11浏览器不⽀持给table-cell元素的设置100%⾼度的⼦元素设置overflow属性测试内容overflow-X | overflow-y overflow-x和overflow-y的属性原本是IE浏览器独⾃拓展的属性，后来被CSS3采⽤，并标准化。
overflow-x主要⽤来定义对⽔平⽅向内容溢出的剪切，⽽overflow-y主要⽤来定义对垂直⽅向内容溢出的剪切 [注意]如果overflow-x和overflow-y值相同则等同于overflow。
如果overflow-x和overflow-y值不同，且其中⼀个值显式设置为visible或未设置默认为visible，⽽另外⼀个值是⾮visible的值。
则visible值会被重置为auto 值: visible | hidden | scroll | auto | inherit | no-display | no-content 初始值: visible 应⽤于: 块级元素、替换元素、表单元格 继承性: ⽆测试内容属性visible 元素的内容在元素框之外也可见 [注意1]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容.box{height: 200px;width: 200px;background-color: lightgreen;}.in{width: 300px;height: 100px;background-color: lightblue;}<div class="box"><div class="in"></div></div> 左图为IE6-浏览器，右图为其他浏览器 [注意2]IE7-浏览器的按钮(包括<button>和<input type="button">两种)存在bug，当按钮上的⽂字越多时，按钮两侧的padding就越⼤。
如何进行兼容性测试
如何进⾏兼容性测试两种⽅式：⼀种可能是⽤⼯具、开发⼯具，⽐如测试IE兼容可⽤IETester，这种做法的结果可能不太准确⼀种是⽤⼈⼒，具体做法： 以浏览器兼容为例： 1）把兼容“分散”到⼈头。
每个⼈使⽤⼀种浏览器，在其使⽤的浏览器下进⾏系统测试。
2）把兼容“分散”到版本。
通常，每个产品都要进⾏多个版本的迭代测试，我们可以在每个版本选择⼀种浏览器对产品进⾏系统测试。
1、Trident 内核（Windows）Trident 就是⼤名⿍⿍的 IE浏览器所使⽤的内核通常被称为IE内核。
Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；世界之窗、 360安全浏览器、傲游；搜狗浏览器；腾讯TT；阿云浏览器（早期版本）、百度浏览器（早期版本）、瑞星安全浏览器等等2、Gecko（跨平台）Netscape6 启⽤的内核，现在主要由Mozilla基⾦会进⾏维护，是开源的浏览器内核，⽬前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为⽕狐内核。
常见的Gecko内核的浏览器：Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon3、KHTML（Linux）KDE开发的内核，速度快捷，容错度低。
常见的KHTML内核的浏览器：Konqueror4、WebKit（跨平台）常见的WebKit内核的浏览器：Apple Safari (Win/Mac/iPhone/iPad)、Symbian⼿机浏览器、Android 默认浏览器，5、Chromium（跨平台）常见的Chromium内核的浏览器：Google Chrome、Chromium、SRWare Iron、Comodo Dragon6、Presto（跨平台）Opera 所采⽤的内核，常见的Presto内核的浏览器：Opera7、更多其它内核可以参考维基百科。
IE基础知识培训资料
IE基础知识培训资料1. 什么是IE？IE是Internet Explorer的缩写，是一款由Microsoft开发的网页浏览器。
它是最早的一批出现在互联网上的浏览器之一，曾经是全球最流行的浏览器。
自1995年首次发布以来，IE经历了多个版本的更新和升级，为用户提供了可靠的网络浏览体验。
2. IE的历史版本•IE1（1995年）：首次发布。
•IE2（1995年）：支持新功能，例如表格和内嵌框架。
•IE3（1996年）：推出了ActiveX控件和CSS支持。
•IE4（1997年）：引入了Active Desktop、集成的Windows操作系统并支持Dynamic HTML（DHTML）。
•IE5（1999年）：对CSS和HTML 4.0提供了更好的支持，并引入了XMLHTTP请求对象，为AJAX的兴起打下了基础。
•IE6（2001年）：成为IE最成功的版本，但也备受诟病，因为在Web标准支持方面存在许多问题。
•IE7（2006年）：着重改进了安全性、CSS支持和用户界面。
•IE8（2009年）：为Internet Explorer带来了更好的Web标准支持和浏览器兼容性。
•IE9（2011年）：继续改进了标准支持和性能。
•IE10（2012年）：支持触摸操作和新的Web标准。
•IE11（2013年）：引入了更多的Web标准功能，例如WebGL和WebRTC。
最新的IE版本是IE11，然而，随着时间的推移，越来越多的用户转向了其他现代的浏览器，如Google Chrome和Mozilla Firefox。
3. IE的特性虽然IE的市场份额不断下滑，但它仍然具备一些特性，对于一些企业用户来说，仍然是必不可少的工具。
•ActiveX控件：IE支持ActiveX控件，这是一种用于将功能嵌入网页的技术。
在过去，这种技术被广泛应用于各种Web应用程序和插件，但由于安全性和兼容性问题，现在已经很少使用了。
•企业级支持：由于IE长期以来的市场主导地位，许多企业应用程序和内部系统都是基于IE开发的。
Web前端兼容性指南
Web前端兼容性指南⼀、Web前端兼容性问题⼀直以来，Web前端领域最⼤的问题就是兼容性问题，没有之⼀。
前端兼容性问题分三类：浏览器兼容性屏幕分辨率兼容性跨平台兼容性1、浏览器兼容性问题第⼀次浏览器⼤战发⽣在上个世纪90年代，微软发布了IE浏览器，和⽹景公司的Netscape Navigator⼤打出⼿，1998年⽹景不得不将公司卖给AOL。
没有了对⼿的IE不思进取，W3C标准⽀持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。
到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕⾷，主要包括Firefox，Chrome，Safari和Opera。
.2001年8⽉27⽇，微软发布IE6，时隔五年直到2006年才发布了IE7。
2009年3⽉19⽇，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多⽅⾯做了很⼤改进，但在HTML5、CSS 3等标准⽀持⽅⾯仍落后于其他浏览器对⼿。
这三个版本的IE是所有兼容性问题的最⼤根源，堪称前端噩梦。
IE6、7、8不⽀持HTML5、CSS3、SVG标准，可被判定为“极难兼容”IE9不⽀持Flex、Web Socket、WebGL，可被判定为“较难兼容”IE10部分⽀持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”IE11部分⽀持Flex、WebGL，可被判定为“较易兼容”IE6、7、8、9可视为“⽼式浏览器”IE10、11可视为“准现代浏览器”Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”浏览器与Windows版本份额Statcounter的各项数据以2020年6⽉为基准。
2、屏幕分辨率兼容性问题在不同的屏幕分辨率，浏览器页⾯展⽰差异很⼤。
特别是屏幕分辨率较⼩时，容易发⽣布局错乱。
为了解决这个问题，响应式UI框架应运⽽⽣。
主流桌⾯屏幕分辨率宽度集中在1280~1920，⾼度集中在720~1080；主流平板屏幕分辨率宽度集中在962~1280，⾼度集中在601~800。
CSSHack的一些写法
CSSHack的⼀些写法参与测试的浏览器：IE6，IE7，IE8，IE9 Preview，Firefox 3.67，Safari 5.0和Opera 10.0以下是IE系列的Hack写法（注意顺序）：.color {color:#000;/* 所有浏览器⽀持 */color:grey !important;/* 除IE6外，所有浏览器都⽀持 */color:red\9;/* IE系列浏览器(ie6+)⽀持，但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */color:orange\0;/* IE8⽀持 */*color:yellow;/* IE6,IE7⽀持 */+color:#C0C;/* IE6,IE7⽀持 */_color:blue;/* IE6⽀持 */}运⾏结果为：IE6⽂字颜⾊blue，IE7为#C0C，IE8为orange，其他浏览器（包括IE9 Preview）均为grey此外，IE7⽀持如下写法：*+html .bgcolor {background-color:#FF99CC;/* 仅IE7⽀持“*+html” */}下⾯是IE6、IE5的⼀些写法（注意注释的摆放位置）：html/* 注释 */>body .ie6 {border:1px dashed #CCC;/* IE6，IE5⽀持 */}.nie6 {display:/* 注释 */none;/* IE6不⽀持 */}.nie56/* 注释 */ {display:/* 注释 */none;/* IE6，IE5不⽀持 */}除此之外，我们在使⽤浮动布局的时候，⼀个div块包含两个浮动的div块，往给这个⽗div块添加如下代码以清除浮动：#box:after {/* 清除浮动,但IE6和IE7不⽀持 */content:".";display:block;height:0;clear:both;visibility:hidden;}但遗憾的是，这种⽅法IE6、IE7不识别，往往我们使⽤在两个⼦div后添加空的div以清除浮动。
CSS Hack
1.区别IE和非IE浏览器#tip {background:blue;/*非IE 背景藍色*/background:red \9;/*IE6、IE7、IE8背景紅色*/}2.区别IE6,IE7,IE8,FF【区别符号】：「\9」、「*」、「_」【示例】：#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等)。
3.区别IE6、IE7、Firefox (方法1)【区别符号】：「*」、「_」【示例】：#tip {background:blue;/*Firefox背景变蓝色*/*background:black;/*IE7 背景变黑色*/_background:orange;/*IE6 背景变橘色*/}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (方法2)【区别符号】：「*」、「!important」【示例】：#tip {background:blue;/*Firefox 背景变蓝色*/*background:green !important;/*IE7 背景变绿色*/*background:orange;/*IE6 背景变橘色*/}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
网页设计岗位职责介绍
网页设计岗位职责介绍网页设计师就是为网站页面进行设计并制作的工作人员，以下是小编为大家搜集整理提供到的网页设计岗位职责，希望对您有所帮助。
欢迎阅读参考学习！网页设计岗位职责介绍1 1.能够组织和协同相关部门进行网站主题活动网页的设计。
2.对网站项目的版式、风格有整体和细节设计把握能力。
3.能够深人理解策划意图，并卓有成效地在页面设计中体现。
4.能够协助进行网站活动主题的参与制定。
5.能够对网站进行相关栏目的维护和更新。
网页设计岗位职责介绍2 1.能够承担一般客户网站的视觉设计提案，并负责制作完成。
2.准确把握客户需求心理，根据提案向客户阐述设计理念，取得客户认可并定案。
3.对所负责订单的制作最终效果和提案效果的一致负责。
4.根据设计经理的分配，协助首席设计师或高级设计师完成部分设计工作。
5.与客户建立良好关系。
网页设计岗位职责介绍3 1、负责网站建设、网站专题、网络推广等美术创意制作工作。
2、按照网站建设和网络推广要求制作各种不同类型的美工作品。
3、全面支持网站建设和网络推广过程中所需要的各种图片和网络广告制作工作。
4、不断丰富和提高自身的美术设计能力，为网站建设、专题建设提供更好的服务。
任职资格：1、美术、设计等相关专业专科或以上学历。
2、一年以上相关专业工作经验、有优秀的艺术素养。
3、熟悉医疗行业网站建设、网络广告、网站专题建设等工作。
4、能够熟练运用Photoshop、Illustrator、Fivework、Flash等设计软件。
熟悉Dreamweaver软件、HTML语言及DIV+CSS布局、对JavaScript有一定的了解，5、创新意识强，学习能力强，具有团队合作精神。
6、有医疗网站设计经验者优先。
对医疗页面设计转化效果有独到见解者优先7，思想敏锐活跃,具有丰富的视觉创作经验和独到的审美修养8，具备优秀的网站整体策划、设计能力,有丰富的网页设计经验;9，熟练处理CSS与IE6、IE7、IE8、FireFox等浏览器兼容问题10，有医院工作经验两年以上的优先考虑。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
IE7 IE8 与FireFox等浏览器 CSS兼
IE6 IE7 IE8 与FireFox等浏览器CSS兼容的写法2010年05月25日星期二11: 32对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYP影响CSS处理, 作为 W3C的标准,一定要加DOCTYP声名.
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 为#lamFloat{float : left ； margin : 5px； /*IE 下 理解为10px*/display : inline ； /*IE下再理解为5px*/}3.浮动ie产生的双倍距 离#box{float : left ； width : 100px； margin : 0 00 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"#div class="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="ce nter"/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="ce nter"/div div id="right"/div/div/div 再 嵌入一个float left 而宽度是100%勺DIV解决之
④ 万能float闭合（非常重要！）关于clear float 的原理可参见[How To Clear Floats Without Structural Markup], 将以下代码加入 Global CSS 中，给需要闭合 的 div 加上即可，屡试不爽./*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" ! - input{width : 200px； height : 30px； border : 1px solid red ； vertical-align : middle ； }- /style 14.web 标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如div id="aa"不容许重复2次,而class定 义的是类,理论上可以无限重复，这样需要多次引用的定义便可以使用他.
.属性的优先级问题ID的优先级要高于class,看上面的例子