div+css常见的错误.docx

div+css常见的错误常见的错误：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特点。别的指定元素时尽量运用em而不是px做单位。7. float元素不能指定margin和padding等属性特点IE在显现指定了margin和padding的float元素时有bug。因而不要对float元素指定margin和padding属性(能够在float元素内部嵌套一个div来设置margin和padding)。也能够运用hack方法为IE指定格外的值。8. float元素的宽度之和要小于100%假如float元素的宽度之和正好是100%，某些陈旧的浏览器将不能正常显现。因而请确保宽度之和小于99%。9. 是不是重设了默认的款式?某些特点如margin、padding等，不一样浏览器会有不一样的解说。因而最好在开发前首先将整体的margin、padding设置为0、列表款式设置为none等。10. 是不是忘掉了写DTD?假如无论怎样调整不一样浏览器显现成果还是不一样，那么能够查看一下页面最初是不是忘了写下面这行DTD：常用的工具：1.Notepad.exe记事本，（程序小，随时手工修改，废物代码少，不能可视化预览）2.Dreamweaver（老牌页面修改工具，功用全，程序比较大，但对P+CSS可视化支撑程度不太友爱）3.editplus(应该是升级版的记事本东西，代码修改有色彩提示)4.Ultraedit5.Golive（将来代替Dreamweaver的产品）6.Topstyle(功用相当多，附有CSS码查看功用，削减写错的时机。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参阅文件与初度触摸CSS的人做为学习使用)兼容方法：差异IE6与FF：backgroundrange；*background:blue；差异IE6与IE7：background:green !important；background:blue；差异IE7与FF：backgroundrange；*background:green；差异FF，IE7，IE6：backgroundrange；*background:green !important；*background:blue；IE7,IE8兼容:HEAD1. CSS中几种浏览器对不同的关键词的支撑，可进行浏览器兼容性重复定义!important可被FireFox和IE7辨认；*可被IE6、IE7辨认；_可被IE6辨认；*+可被IE7辨认。2. IE专用的条件注释3. 几个浏览器对实践像素的解说IE/Opera：对象的实践宽度= (margin-left) + width + (margin-right) Firefox/Mozilla：对象的实践宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)4. 鼠标手势疑问：FireFox的cursor特点不支撑hand，可是支撑pointer，IE两个都支撑；所以为了兼容都用pointer5. FireFox中设置HTML标签的Style特点时，一切方位、宽高和尺度值有必要后跟px，IE也支撑此写法，因而一致加px单位。如Obj.Style.Height = imgObj.Style.Height +px；6. FireFox无法解析简写的padding特点设置，如padding 5px 4px 3px 1px；有必要改为padding-top:5px；padding-right:4px；padding-bottom:3px；padding-left:1px0；7. 消除ul、ol等列表的缩进时，款式应写成:list-style:none；margin:0px；padding:0px；其间margin特点对IE有效，padding特点对FireFox有效8. CSS操控通明：IE：filter:progidXImageTransform.Microsoft.Alpha(style=0,opacity=60)；FireFox：opacity:0.6；9. CSS操控圆角：IE：不支撑圆角；FireFox: -moz-border-radius:4px；或-moz-border-radius-topleft:4px；-moz-border-radius-topright:4px；-moz-border-radius-bottomleft:4px；-moz-border-radius- bottomright:4px；10. CSS双线高低边框：IE：border:2px outset；FireFox：-moz-border-top-colors: #d4d0c8 white；-moz-border-left-colors: #d4d0c8 white；-moz-border-right-colors:#404040 #808080；-moz-border-bottom-colors:#404040 #808080；11. IE支撑CSS方法cursor:url()自界说光标款式文件和滚动条色彩个性；FireFox对以上两者均不支撑12. IE有Select控件永久处于最上层的bug,且一切CSS对Select控件都不起作用13. IE支撑Form中的Label标签，包括图像和文字内容；FireFox不支撑包括图像的Label，点击图像不能让符号label for的Radio或CheckBox发生作用14. FireFox中的TextArea不支撑onScroll事情15. FireFox不支撑display的inline和block16. FireFox对Div设置margin-left, margin-right为auto时现已居中, IE中不可17. FireFox对Body设置text-align时, Div需求设置margin: auto(主要是margin-left margin-right)方可居中18. 对超链接的CSS款式设置最好遵从这么的次序：L-V-H-A。即 这么能够防止一些拜访往后的超链接就不具有hover和active款式了19. IE中设置长阶段主动换行在CSS中设置word-wrap:break-word；FireFox中运用JS插入的方法来完成，详细代码如下：20. 在子容器加了起浮特点后,该容器将不能主动撑开解决方法：在标签完毕后下一个标签中加上一个铲除起浮的CSS clear:both；21. 起浮后IE6解说外边距为实践边距的双倍解决方法：加上display:inline22. IE6下图像下方会有空地解决方法：为img加上display:block或设置vertical-align特点为vertical-align:top | bottom |middle |text-bottom23. IE6下两个层中心有空地解决方法：设置右侧div也同样起浮float:left或许相对IE6界说margin-right:-3px；24. LI中内容超越长度后以省略号的显现方法 （只适用与IE）25. 将元素的高度和行高设为一样值，即可笔直居中文本26. 对齐文本与文本输入框，须在CSS中添加vertical-align:middle；特点设置27. 支撑WEB规范的浏览器设置了固定高度值就不会像IE6那样被撑开，可是又想设置固定高度又想能够被撑开呢?解决方法是去掉height特点而设置min-height，为了兼容不支撑min-height的IE6能够这么界说： height:auto!important；he