div+css中常见的浏览器兼容性处理和解决办法
divcss网页的内容显示不完整的诊断
要减少内容，将显示不完整的内容去掉。
•
2、设置了css样式表属性overflow:hidden，隐藏超
出指定宽度、高度的对象
为什么在IE6中设置了高度也能显示完整，而在其它 浏览器中却显示不完整？
• 答：因为IE6内核的原因，你设置了高度，但你内容超出 设置高度，他将自然的撑破你设置的高度宽度，而在IE7、 IE8、火狐等浏览器中将不能撑破设置的高度。
•
当然如果你想你设置的内容再多也不撑破你设置的
高度宽度（包括IE6中），你可以在设置高度和宽度同时
再设置overflow:hidden属性样式，这样在IE6中也不会撑
破你设置高度和宽度。
分析造成原因
• 1、css中设置了高度
•
2、设置了css样式表属性overflow:hidden，隐藏超
出指定宽度、高度的对象-css隐藏。
解决方法
• 1、css中设置了高度
•
取消其对象的高度（height）css样式，即可兼容各
浏览器，内容也会显示完整。如果取消了高度让网页布局
左右内容板块边
divcss框架布局的缺点和优点介绍
divcss框架布局的缺点和优点介绍
我们为大家收集整理了关于divcss框架布局的缺点和优点，以方便大家参考。
1、开发效率的提高。
如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。
定义好的框架可以大大提高你的工作效率，避免一些常见的错误。
如果你的工作是按件计费的，你的报酬一定会比别人多。
2、规范代码命名。
在多个站点中你可能会用到一些同样的CLASS或ID。
如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。
不用浪费时间在代码的阅读上。
3、更好的团队合作
有些公司会将一些稍大的站点的前端代码分成若干子项目。
有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。
久而久之，废弃代码越来越多，互相之间也难以阅读。
如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。
遇到的兼容性问题与解决方法
遇到的兼容性问题与解决⽅法浏览器兼容问题⼀：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。
碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的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%解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。
IE火狐兼容问题
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
例如：
<#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
解决网页不兼容的问题
2013年度最新整理45个div+css兼容性问题与解决方案分类：CSS前端开发2013-03-01 16:41 16人阅读评论(0) 收藏举报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”></div>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是最小宽度。
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 */}需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。
div+CSS浏览器兼容问题整理（IE6.0、IE7.0,ie8,FireFox..
div+CSS浏览器兼容问题整理（IE6.0、IE7.0,ie8,FireFox..CSS技巧1.div的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。
缺点是要控制内容不要换⾏powered by 25175.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命令，它可以指定元素最⼩也不能⼩于某个宽度，这样就能保证排版⼀直正确。
网页设计中的DIV+CSS技术应用研究
网页设计中的DIV+CSS技术应用研究摘要：以目前非常流行的网页设计技术CSS+DIV为研究对象，阐述了该技术产生的背景，分析了该技术在实际应用中的优缺点，并在此基础上提出了能使该技术在应用上实现最优化的一系列方法。
关键词：DIV；CSS；网页布局；XMHTL0 引言“内容”与“形式”分离式的网页设计已成为时下静态网页设计的主流方向，整个网络刮起了一股“网站重构”的浪潮。
以“DIV控制网站的模块布局，CSS控制页面内容表现形式”的DIV+CSS技术为许多网页设计者带来了福音，但是在实际应用时也存在一些问题。
本文分析了CSS+DIV的产生背景，并对该技术的优缺点进行了探讨，然后在此基础上提出了一系列可行方法使该技术在网页设计中能做到扬长避短，将其功能发挥到最大化。
1 DIV+CSS产生的背景1.1 从HTML到XHMLHTML（Hypertext Markup Language）——超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分，是传统基于TABLE布局的一种基本网页设计语言。
XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。
XHTML是一个基于XML的标记语言，XHTML是一种增强了的HTML，是基于“DIV+CSS”技术的一种网页设计语言。
建立XHTML的目的就是实现HTML向XML的过渡。
1.2 从TABLE到DIV+CSS最早期的TABLE布局网页是由表格的嵌套和合并拆分所实现，而所有的样式都直接在HTML代码中体现，样式与内容完全混合在一起。
后来，许多网页设计者会将整个网页设计分成两步：先直接在图像编辑软件生成一张网页的平面图，通过切片导出生成TABLE布局的网页；然后，利用网页编辑软件生成一些动态链接的效果。
但是这种两步走并不是真正意义上的“内容”与“样式”的分离，这样的网页代码中还是存在很多样式信息，也存在大量重复和冗余，同样不利于后期修改维护。
CSS兼容性问题总结及解决方法
CSS兼容性问题总结及解决⽅法css兼容问题兼容问题1.⽂字本⾝的⼤⼩不兼容。
同样是font-size:14px的宋体⽂字，在不同浏览器下占的空间是不⼀样的，ie下实际占⾼16px，下留⽩3px，ff下实际占⾼17px，上留⽩1px，下留⽩3px。
解决⽅案：给⽂字设定 line-height 。
确保所有⽂字都有默认的 line-height 值。
2.ff下容器⾼度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑⼤，⽽ie下是会被内容撑⼤，⾼度限定失效。
所以不要轻易给容器定义height。
3. 横向上的内容撑破容器问题。
如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折⾏。
故，内容可能撑破的浮动容器需要定义width。
4.浮动的清除，ff下必须清除浮动clear:both。
5. double-margin bug。
ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决⽅案，给浮动容器定义display:inline。
6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将⾃动⽣成margin-bottom:14px。
padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这⼀种出现条件。
解决⽅案：外层元素设定border 或设定float。
7.吞吃现象.还是ie6，上下两个div，上⾯的div设置背景，却发现下⾯没有设置背景的div 也有了背景，这就是吞吃现象。
对应上⾯的背景吞吃现象，还有滚动下边框缺失的现象。
解决⽅案：使⽤zoom:1。
8.注释也能产⽣bug~~~“多出来的⼀只猪。
”这是前⼈总结这个bug使⽤的⽂案，ie6的这个bug 下，⼤家会在页⾯看到猪字出现两遍，重复的内容量因注释的多少⽽变。
解决⽅案：⽤“<!–[if !IE]> picRotate start <![endif]–>”⽅法写注释。
DIVCSS常见错误是什么
DIVCSS常见错误是什么
在采用div+css标准布局网页时常常会遇到兼容问题。
我们为大家收集整理了关于DIVCSS常见错误，以方便大家参考。
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。
可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的} 等。
可以利用CleanCSS来检查
CSS的拼写错误。
CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。
这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。
这是MacIE的闻名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。
所以不管float元素的内容如何，一定要为其指定width属性。
zzdiv css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致
查看文章zzdiv+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动2008-01-11 1733由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。
[出现抖动的代码]最近在写一个Div+Css布局的网站首页，以前写的页面都统一width900px;不存在什么布局呀什么float的设置。
现在没办法呀！要对页面进行切割，分块。
幸好，有点css的基础，不过用起来就比较郁闷了。
在ie和firefox下，相同的属性值往往会有不同的显示效果。
没办法要兼容浏览器只得一个一个bug去找。
但完全兼容浏览器是无法做到的，所以也只能将个大概的效果展示出来，不要偏差太大太明显就行。
首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。
floatleft;floatright;是常用的浮动属性。
为了使div能在一行排列，不得补用到它们。
呵呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。
哎！话是这么说，但真正用到时却出问题了。
在ie下，只要前一个div有floatleft;后面的div宽度不超过（总body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。
ie和firefox 下，这点效果是一样。
好，接着往下，下一行也这样布局，就分两栏吧。
style type=textcss#div1{}{width200px;height80px;floatleft;border1px solid blue;}#div2{}{width600px;height80px;border1px solid blue;}styledivdiv id=div1divdiv id=div2divdivdiv style=clearboth;margin-top20px; id=div3div这样的布局，在ie下和火狐下的显示效果就不同了在firefox下的margin-top20px;没效果。
网页兼容的处理
第十一章网页兼容的处理对于一个网页设计师来说，众多浏览器间的CSS兼容问题从来都是非常棘手的。
由于不同的浏览器（常见的包括IE6,IE7,Firefox等）对CSS的解析和认知的不同，严重造成了浏览器页面效果的不一致，使得我们在进行DIV+CSS页面排版时，不得不时刻考虑到常见浏览器间的CSS兼容性问题。
11.1 解决浏览器兼容的原理什么是CSS Hack呢？为解决浏览器间的CSS兼容性问题，设计师们针对不同浏览器写不同的CSS code的过程，就是一个Hack的过程了。
在这个过程中，不但要做到浏览器的兼容性，更要合理地做到CSS代码的绝对优化，尽可能少地人为制造冗余的代码，使CSS代码尽可能简练易读也是非常重要的工作之一。
为什么要用CSS Hack呢？答案很简单，通过对CSS代码的兼容性问题的解决，使得我们写出的页面能在不同的浏览器中达到统一的页面效果。
不会出现IE浏览器中完好的页面拿到FF中去就横七竖八千疮百孔的事情。
CSS Hack的原理是什么？根据不同浏览器对CSS样式的支持程度，解析结果和识别CSS的优先级不同，设计师们就可以根据这些不同浏览器的特点来书写不同的CSS样式代码。
IE6能识别下划线_和星号*，IE7能识别星号*，不能识别下划线_，而firefox两个都不能识别，如此，就可以针对IE6.IE7和FF通过对这些特殊符号的使用写不同的代码了。
div{background:green; /* for FireFox */*background:red; /* for IE7 */_background:blue; /* for IE6 */}该样式显示的效果是：在FireFox中背景色为green；在IE7中背景色为red；在IE6中背景色为blue。
CSS解析的过程：CSS读取的顺序是由上至下，由左至右。
在FireFox下，FireFox不能识别*和_，将下面的两行代码过滤掉不作任何解析，执行background:green;完后结束；在IE7下的解析结果为div{ background:green; *background:red; },根据CSS的优先级可以确定后面出现的样式会优先于前者被调用，即实现*background:red;的解析；在IE6下，因为三种样式代码都可以解析，解析结果为div{ background:green; *background:red; _background:blue;}，但同样根据CSS的优先级，只会把最后一个样式读取，即_background:blue;被应用。
DIV+CSS样式在IE6.0浏览器中常见问题解决方法论文
DIV+CSS样式在IE6.0浏览器中常见问题的解决方法div+css样式如今已经飞入了各大网站设计行业。
对于新手来说虽然已经把样式标签与样式代码熟记于心，但是编辑出来的网站与预先设计还有一段差距。
尤其是涉及到不同的浏览器时，在编写时必须对各个浏览器的显示效果进行测试。
由于ie6.0在出现时，css 样式还只是初级发展阶段，有很多功能与效果实现与后面的浏览器有所不同。
故在div+css样式编写时要着重解决相关问题。
1、解决ie6.0当中网页居中的问题为了网页可以更加美观适应性强，一般网站在制作网页时，会让整体网页居中对齐。
以前在使用表格布局的时候，要让一个网站居中对齐是非常简单的。
只需要设置表格居中对齐就可以实现效果。
使用div+css样式其实原理是类似的，只是方法不同。
比如：#top{width：900；margin：0 auto；}网站制作完成后，在各种不同浏览器当中使用，会发现ie6.0依然是左对齐，无法实现居中对齐。
在这句代码中是利用auto来现实居中对齐的，意思是左边与右边宽度随意。
在ie7.0及其以后的版本当中，会对左右宽度随意进行平均分配。
也就是说如果你的网页宽度为900像素，浏览器宽度为1100像素，那么浏览器会自动算出两边宽度分别为150。
这样就可以现实居中对齐的效果。
但是在ie6.0当中对auto却无法解析。
对于这个问题，可以借用text-align来解决。
对上述代码修改后如下：#top{width：900；margin：0 auto；text-align：center；}2、使用float浮动容器后ie6.0不适应问题为了方便div+css样式代码可以适用于各种浏览器，一般在代码编写时会使用float浮动容器。
比如：# left {float：left；width：240；}设置完成后，在ie7.0与火狐等浏览器中两个页面展示出来的效果基本上相差不大。
但在ie6.0中使用浮动容器后会在右侧多出2-3像素左右的高度。
浏览器不兼容原因及解决方案
浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为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不识别，屏蔽IE6select { display /*屏蔽IE6＊/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/**/ { display /＊IE6,IE5不识别＊/：none；}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
DIV和CSS总结
DIV和CSS总结IE6下，DIV容器和padding之和，是DIV所占区域的总宽度（IE8时DIV容器所占区域总宽度不需要计算padding）真实宽度=width+padding+border+margin!important强调声明前面的语句有效性。
比如设置了:padding:0px!important;padding:10px;后面的重要性就不如前面带声明的！一、设置为float的div在IE6下margin会加倍解决方法一：是在这个div里面加上display:inline。
但是会导致内容区域的第一行文字出现缩进，和之后的行不对齐，应该再加一层div解决如：＜#div id="imfloat"> 相应的css为#imfloat{float:left; margin:5px; /*IE下理解为10px*/ display:inline; /*IE下再理解为5px*/}解决方法二：通过!important这样的手段hack。
（这里面有3种形式）第一种：.div { background:orange;/*ff*/*background:green !important;/*ie7*/*background:blue; /*ie6*/ }第二种：.div { margin:10px;/*ff*/*margin:15px;/*ie7*/_margin:15px;/*ie6*/ }第三种：#div { color: #333; } /* ff */* html #div { color: #666; } /* IE6 */*+html #div { color: #999; } /* IE7 */二、IE6和IE8下的导航菜单有时候鼠标放上，IE8会有背景色而IE6没有，这时候要给区域加上高度和宽度，试试height:auto;width:88px二、在google、IE8、Firefox中margin-top的兼容在这些浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
浏览器的兼容
一些问题是浏览器自身的问题，遇到问题发生无法避免的情况下，那就要考虑使用一些css hack了，以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性，如果我想要只针对IE7/firefox起作用，写法如下：
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: e-xpression(( 300 - this.height ) / 2);” />
< /div >
E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时，就会出现捉迷藏情况。如下面例子：
[xmlns] #left {
float:left;
border:4px solid #999;
padding:5px;
width:200px;
height:200px;
}
c: 只针对IE6起作用，可以在css前面加* html,如:
* html #left {
clear:both;
4、html/**/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5
CSS浏览器兼容问题整理
CSS浏览器兼容问题整理对于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下面根本等于没有设置宽度和高度。
divcss课程设计
divcss课程设计一、课程目标知识目标：1. 理解并掌握HTML和CSS的基础知识，了解div标签和css样式的应用；2. 学会使用div+css进行网页布局和排版，掌握常见的布局方法；3. 了解浏览器兼容性问题，并学会解决常见兼容性问题。
技能目标：1. 能够运用div+css编写简洁、规范的网页代码；2. 熟练使用CSS选择器，对网页元素进行样式设计；3. 培养良好的代码编写习惯，提高编程效率。
情感态度价值观目标：1. 培养学生对前端开发的兴趣，激发学习热情；2. 培养学生的团队协作意识，学会与他人共同解决问题；3. 培养学生的创新精神，敢于尝试新方法，勇于解决实际问题。
课程性质：本课程为实践性较强的课程，结合当前网页设计行业的需求，以培养学生的实际操作能力为主要目标。
学生特点：学生具备一定的计算机操作能力，对网页设计有一定兴趣，但可能对div+css布局方法了解较少。
教学要求：教师应注重理论与实践相结合，以实例教学为主，让学生在实际操作中掌握知识，提高技能。
同时，关注学生的个体差异，给予个性化指导，确保每个学生都能达到课程目标。
在教学过程中，注重培养学生的团队协作能力和创新精神。
二、教学内容1. HTML基础回顾：复习HTML的基本结构，重点讲解div标签的使用和属性设置。
- 章节关联：课本第二章HTML基础部分。
2. CSS基础：讲解CSS的基本语法、选择器、属性和值，以及如何将CSS样式应用到HTML文档中。
- 章节关联：课本第三章CSS样式部分。
3. 网页布局：学习常见的网页布局方法，如盒模型、浮动布局、定位布局等，并通过实例进行操作练习。
- 章节关联：课本第四章CSS布局部分。
4. 响应式设计：介绍响应式设计的概念，学习如何使用媒体查询为不同设备适配样式。
- 章节关联：课本第五章响应式设计部分。
5. 浏览器兼容性：分析常见浏览器兼容性问题，学习解决兼容性问题的方法和技巧。
- 章节关联：课本第六章浏览器兼容性部分。