应用场景：内容
29 |应用场景：内容
35 |解决方案：内容
40 |解决方案：对其父容器添加text-align:center;（或增加DTD声明）
39 |本段落margin值为20px
27 |应用场景：如果元素没有垂直边框或内边框，它的高度就是它包含子元素的顶部和底部边框边缘之间的距离
30 |本段落margin值为20px，padding值为1px
35 |应用场景：如果元素添加一个垂直边框或内边距，它的高度就是它包含的子元素的顶部和底部外边距边缘之间的距离
38 |解决方案：交换文本与浮动元素的位置
42 |应用场景：未设置高度
30 |应用场景：IE6中为行元素设置高度，上下行margin有效且不被压缩（无DTD声明时）
40 |解决方案：对该元素添加：line-height:0; font-size:0;
40 |解决方案：给外层也设置相对定位position:relative
41 |解决方案：hack暴力破解_bottom:-1px;
41 |解决方案：把background-color改成background。或者，非#fff || #ffffff
41 |这是一段测试文字。这是一段测试文字。这是一段测试文字。这是一段测试文字。这是一段测试文字。
29 |应用场景：IE8会忽略伪对象:first-letter/:first-line里的!important规则，本例中首字母应为绿色
31 |这是一段测试文字。这是一段测试文字。这是一段测试文字。这是一段测试文字。这是一段测试文字。
35 |应用场景：IE6会忽略同一条样式体内的!important规则，本例中文字应为绿色
37 |
解决方案：设置img的margin值，margin-top为(外容器高度-图片高度)/2
41 |浏览器：IE6
19 |描述：所有块width:50px;height:50px;当没有DTD声明时，所有IE版本也会进入Quirks Mode。width近似于按25px解析
20 |应用场景：box2{padding:50px;}
31 |应用场景：box2{padding-left:50px;}
38 |浏览器：IE6
20 |描述：所有块width:50px;height:50px;当没有DTD声明时，所有IE版本也会进入Quirks Mode。width近似于按25px解析
21 |应用场景：box2{padding:50px;}
32 |应用场景：box2{padding-left:50px;}
39 |
25 |
26 |
27 | IE透明滤镜 29 |
30 | filter:alpha(opacity=40); 31 | filter: progid: DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE6, IE7, and IE8 */ 32 | -ms-filter : progid:DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE8 only */ 33 |34 | 35 |
浏览器：IE6/7
20 |描述：元素设置了 overflow: auto;子元素设置 position:relative;并且其高度大于父元素,在IE6和IE7中会产生一个比较难看的 Bug,也就是子元素块不被隐藏会溢出父元素块
21 |解决方案：父元素中也设置一个position:relative;
45 |浏览器：IE6
20 |描述：使用float浮动容器，如果浮动容器具有margin值，则呈现margin-left值双倍情况。
21 |解决方案：在浮动元素上加上position: absolute;
41 |解决方案：在浮动元素上加上display:inline;
47 |解决方案：增加IE滤镜，filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale, src="绝对路径");
41 |解决方案：li中添加display:inline; width:100%;
35 |解决方案：触发layout，zoom:1;
50 |浏览器：IE6
20 |描述：图片无法通过display:table-cell; vertical-align:middle;设置垂直居中
21 |解决方案： 41 |
42 | *display: block; 43 | *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ 44 | *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ 45 |46 | 47 |
浏览器：IE6
21 |描述：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug（在其他浏览器中重叠）
22 |解决方案：为右边的元素添加float:left;
44 |解决方案：使用hack暴力破解margin-left:-3px;
51 |浏览器：IE6
19 |描述：IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜（用于PNG32 Alpha透明）后链接不能点击
20 |解决方案：a标签上加相对定位的属性（position:relative）
44 |解决方案：为input或button添加overflow:visible;
50 |浏览器：IE6
19 |描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在 Firefox、IE7、IE8 及其他标准浏览 器里,超出的内容仅仅只是超出边缘;但在 IE6 中容器会忽 视定义的 width 值,宽度会错误地随内 容宽度增长而增长。如果在这个浮动元素之后还跟着一个 浮动元素,那么就会导致错位问题
20 |解决方案：overflow:hidden;
46 |浏览器：IE6
24 |描述：一些浮动元素中有一个display:none;的元素，会引起3px的误差
25 |解决方案：将最后一个div加一个margin-right:-3px
55 |解决方案：border:medium none;
43 |解决方案：border:0;
49 |解决方案：设置background-color，如background-color:#fff;
55 |浏览器：IE6/7
21 |描述：当某块级元素设置了margin-top，并且之前存在着可被渲染的绝对定位元素时，其margin-top在IE6、IE7会失效。
22 |解决方案：将定位元素放在后面
48 |解决方案：将定位元素放在后面
58 |解决方案：给其父级元素定义z-index，有些情况下还需要定义position:relative
57 |浏览器：IE
23 |描述：造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。
24 |解决方案：删除两浮动元素间所有的注释
51 |解决方案：调整box1的宽度
60 |浏览器：IE6
20 |描述：float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐
21 |解决方案：li元素一起漂浮，即float:left; width:100%;
50 |解决方案：li元素中添加vertical-align:bottom;
60 |这里是一行文字
32 |这里是一行文字
45 |解决方案：增加一个清除类（如clearfix）
48 |.clearfix:after{display:block; content:"."; height:0; visibility:hidden; clear:both;}
49 |.clearfix{*zoom:1;}
50 |这里是一行文字
56 |解决方案：在父容器中添加overflow:hidden;*zoom:1;
59 |
31 |
43 | 解决方案：为img添加display:block;
46 |
51 | 解决方案：为img添加vertical-align:top;
54 |
59 | 解决方案：在img的父容器中添加font-size:0; line-height:0;
62 |
29 | HTML结构 36 |
37 | <a class="pic" href="#"> 38 | <img src="../images/test.jpg" /> 39 | <div class="hover"> 40 | <div class="bg"></div> 41 | <div class="content">我是不透明的内容</div> 42 | </div> 43 | </a> 44 |45 | 46 |
CSS样式 47 |
48 | .pic{width:180px; height:180px; display:block; position:relative;}
49 | .hover{display:none;}
50 | .pic:hover{zoom:1; cursor:pointer;}
51 | .pic:hover .hover{display:block; position:absolute; top:0; left:0; z-index:9; }
52 | .hover .bg{width:180px; height:180px; background:#000; opacity:.75; filter:alpha(opacity=75);}
53 | .hover .content{width:180px; height:180px; position:absolute; top:0; left:0; color:#fff; z-index:99;}
54 |
55 |
56 | 解决方案：li中添加_display:inline;此时hover只在a标签的文本中生效
50 |浏览器：IE6
23 |描述：一个内容区块，其中包含两个浮动的box，外加一个绝对定位的box，设置如下样式时会发生IE6绝对定位元素消失的BUG。
24 |解决方案：给content加一个display:inline样式
52 |解决方案：在main元素之前加一个空的<div></div>
62 |解决方案：给abs元素再嵌套一个div元素
72 |浏览器：*
22 |描述：真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距
23 |解决方案：使用font-size:0;基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)
51 || 序号 | 名称 | 描述 | 26 |
|---|---|---|
| 1 | 水平居中 | 使用margin:0 auto;无法居中块元素 | 31 |
| 2 | 双外边距浮动bug | 使用float浮动容器，如果浮动容器具有margin值，则呈现margin-left值双倍情况 | 34 |
| 3 | 绝对定位奇数宽高1px间距bug | 当绝对定位元素的父元素高或宽为奇数时，bottom和right会多出1px | 37 |
| 4 | 外边距叠加 | 外边距叠加的算法 | 40 |
| 5 | 内联元素margin | IE中内联元素撑开容器 | 43 |
| 6 | 清除内部浮动 | 当子元素浮动且未知高度时，如何使父容器适应子元素的高度 | 46 |
| 7 | 垂直列表间隔bug | 当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG | 49 |
| 8 | li底部空白行 | li里面的a标签display:block;时，并未触发layout | 52 |
| 9 | 浮动元素3px间隔Bug | 发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug | 55 |
| 10 | 图片下方出现空白间隙 | 当图片为其父容器的唯一子元素，且代码中标签之间有间隙，会在图片下方产生间隙 | 58 |
| 11 | 无法设置微型高度 | IE6及更早浏览器默认高度为19px行高，高度无法设置为小于19px的值 | 61 |
| 12 | 按钮留白随value增加 | button、input两边留白随value长度的增加而增加 | 64 |
| 13 | 文本溢出BUG | 造成此BUG的原因可能是多重混合的 | 67 |
| 14 | !important规则 | 在一些情况下浏览器忽略!important规则 | 70 |
| 15 | overflow失效 | IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效 | 73 |
| 16 | 完美遮罩层 | 容器透明，内容不透明 | 76 |
| 17 | 列表阶梯bug | float列表元素不水平对齐 | 79 |
| 18 | z-index层次错误 | IE6中的绝对定位元素，z-index只与父容器的z-index进行比较 | 82 |
| 19 | 盒模型（无声明） 盒模型（含声明） | 当没有DTD声明时，所有IE版本也会进入Quirks Mode | 85 |
| 20 | IE透明滤镜 | 兼容各版本IE的滤镜 | 88 |
| 21 | 不支持png透明图片 | IE6中不支持png24的透明效果 | 91 |
| 22 | background-color失效 | :hover 时若background-color为#fff, 失效 | 94 |
| 23 | 图片垂直居中 | 图片无法通过display:table-cell; vertical-align:middle;设置垂直居中 | 97 |
| 24 | inline-block元素间间距 | 如何取消inline-block元素间间距 | 100 |
| 25 | 滤镜致链接失效BUG | E6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜后链接不能点击 | 103 |
| 26 | 图片与文本垂直对齐居中 | 当图片与文本在一起，且图片由链接包含，设置行高无法水平居中 | 106 |
| 27 | display:none引起的3像素的BUG | 一些浮动元素中有一个display:none;的元素，会引起3px的误差 | 109 |
| 28 | 距出边界的Bug | 子元素块不被隐藏会溢出父元素块 | 112 |
| 29 | 浮动层错位 | 当内容超出外包容器定义的宽度时会导致浮动层错位问题 | 115 |
| 30 | li背景失效 | 当li中有浮动元素时，且li的display为inline; | 118 |
| 31 | 绝对定位元素消失bug | 两个浮动的box，外加一个绝对定位的box，设置如下样式时会发生IE6绝对定位元素消失 | 121 |
| 32 | margin-top失效 | 当某块级元素设置了margin-top，并且之前存在着可被渲染的绝对定位元素时，其margin-top在IE6、IE7会失效。 | 124 |
| 33 | 无法取消input默认边框 | 无法使用border:nonoe;取消input默认边框 | 127 |
| 34 | 右浮动元素换行 | 当一个容器内有文本（或一般文档流布局的元素）和向右浮动元素，浮动元素另起一行浮动 | 130 |