DIV教程之破洛洛搜集IE6/7/8 CSS Bug对照

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
破洛洛文章简介：IE扫瞄器中的CSSBUG总结.
最使人头痛确当数IE，出格是IE6。弄定了IE6，基础也就可以称霸半个山河了。弄定了IE，也相称于占据了7、80%的领地。你想做一个统治页面兼容的主么？归正我是想的。作为一位前端，我们一般要做的就是让页面在各体系A-Grade扫瞄器，乃至网站扫瞄份额0.1%以上的扫瞄器上优秀显现。固然，另有功能成绩。不外，明天要说的是款式的兼容成绩。在IE/Mozilla/Webkit/Opera四分世界的明天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Operaetc.这些扫瞄器的兼容，无不让前端们头痛。而在这当中，最使人头痛确当数IE，出格是IE6。弄定了IE6，基础也就可以称霸半个山河了。弄定了IE，也相称于占据了7、80%的领地。你想做一个统治页面兼容的主么？归正我是想的。

登录/注册后可看大图

明天，趁着想完美公司的外部款式框架，把HasLayout.net的IECSSBug过了一遍。收拾中劳绩了很多器材，一些官方的不敷，也依据本人的常识晋级了一下。固然，也顺遂地晋级了框架的一些内容，感到甚爽。随后，便将一些值得往看的Bug收拾成一个列表，基于Alipay前端巨大的分享精力，分享出来以供团队工友们和人人参考。
同时，因为收拾仓皇，有些了解和表达不妥和其他忽略在所不免，还请人人协助改正。感谢。

成绩扫瞄器DEMO办理办法HackingRules:
property:all-ie9;property:gte-ie8;*property:lte-ie7;+property:ie7;_property:ie6;
1input[button|submit]不克不及用margin:0auto;居中IE8bug|fixed为input增加width2body{overflow:hidden;}没有往失落转动条IE6/7bug|fixed设置html{overflow:hidden;}3hasLayout的标签具有高度IE6/7bug|fixed*height:0;
_overflow:hidden;4form>[hasLayout]元素有margin-left时，子元素中的[input|textarea]呈现2×margin-leftIE6/7bug|fixedform>[hasLayout元素]{margin-left:宽度;}
formdiv{*margin-left:宽度÷2;}5当border-width有1条<边3条时被设置成dotted时，1px的边dotted显现成dashedIE7bug|fixed不在统一个元素上利用分歧宽度的dotted6当子元素有position:relative的时分，父元素设置overflow:[hidden|auto]相称于给子元素设置了position:visible;IE6/7bug|fixed给父元素设置position:relative;7:hover伪类不克不及改动有position:absolute的子级元素的left/top值IE7bug|fixed把top/left的值设置成除0%外的一切百分值；或增加一个margin-[一切偏向]除0外的一切值，包含0%8:focus+selector{}选择器生效IE8bug|fixed在生效选择器前面增加一个空选择器,:focus{}9列表中凌乱的浮动：在list中浮动图片时，图片呈现溢出一般地位；或没有list-styleIE8bug|fixed用背景图片交换list-style10th不会主动承继下级元素的text-alignIE8bug|fixed给th增加text-align:inherit;11款式(包含link/style/@import(link))最多同意个为是：32IE6-8─知识99.99%的情形下，不会碰到12:hover时若background-color为#fff,生效IE7bug|fixed把background-color改成background。大概，非#fff||#ffffff13疏忽’>’后有正文的选择器：selector>/**/selector{}IE7bug|fixed官方DEMO有误14*htmlIE6─HACK只对IE6无效15PNG图片中的色彩和背景色彩的值不异，但显现分歧IE6-7bug|fixed使用pngcrush往除图片中的Gammaprofiles16margin:0auto;不克不及让block元素程度居中IE6-8bug|fixed给block元素增加一个width17利用伪类:first-line|:first-letter,属性的值中呈现!important会使属性生效IE8bug|fixed!importantisevil,don’tuseitanymore18:first-letter生效IE6bug|fixed把:first-letter移到离{}比来的中央，如h1,p:first-letter{}，而非p:first-letterh1{}19Position:absolute元素中，adisplay:block,在非:hover时只要文本可点击IE6/7bug|fixed给a增加background,假如背景通明，利用background:url(‘任何页面中已缓存的文件链接’)，不保举background：url(#)[官方的办理办法]，由于会增添一下HTTP哀求20float列表元素不程度对齐：li不设置float，a设置display:block;float:[偏向]，li不程度对齐IE6/7bug|fixed给li设置display:inline或float:[偏向]21dt,dd,li背景生效IE6bug|fixeddt,dd,li{position:relative;}22<noscript/>元素的款式在启用javascript的情形下显现了款式IE6-8bug|fixed使用js给<noscript/>增加display:none;23利用filter处置的通明背景图片的通明部分不成点IE6-8bug|fixed把background:none酿成background:url(‘链接’)，链接到自己和图片以外的任何文件24li内元素偏离baseline向下拉IE8bug|fixed给li设置display:inline或float:[偏向]25列表中li的list-style不显现IE6/7bug|fixed给li增加margin-left，留空间来显现（不要加在ul上）26图片不克不及垂直居中IE6/7bug/fixed增加一个空标签，并赋给”Layout”,好比display:inline-block;27不克不及自界说指针款式IE6-8bug|fixed给指针文件设置相对路径28背景溢出，拖动转动条后显现一般IE6bug|fixed给父元素增加overflow:hidden避免溢出，并付与hasLayout,假如增加_zoom:1;29高度凌驾height界说的高IE6bug/fixed增加_overflow:hidden;(保举)大概_font-size:0;30宽度凌驾width界说的宽IE6bug/fixed增加_overflow:hidden;31双倍边距IE6─知识增加display:inline到float元素中32margin负值埋没：hasLayout的父元素内的非hasLayout元素，利用负边距时，超越父元素部分不成见IE6/7bug/fixed往失落父元素的hasLayout；大概赋hasLayout给子元素,并增加position:relative;33给两个浮动元素的某中一个的笔墨设定为斜体，另外一个元素下拉在有斜体笔墨元素的上面IE6bug/fixed给有斜体笔墨的元素增加overflow:hidden;353px距离：在float元素后的元素，会有3px距离IE6bug/fixed由于是切实的3px，以是，用“暴力破解”吧，好比_margin-left:-3px;35text-align影响块级元素IE6/7bug/fixed收拾你的float；大概分隔设置text-align</p>
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.