Bug-IE6:

项目背景：tab实现

html：

1. ul{
2. height : 25px;
3. _overflow:hidden;//很重要!
4. border-bottom : 2px solid #ccc;
5. }
6. li{
7. height : 24px;
8. border-width : 1px 1px 0 1px;
9. .....
10. }
11. li.current{
12. border-width : 3px 1px 0 1px;
13. .....
14. }

bug表现：li无法超出ul的高度以便将ul的下边框挡住，z-index、margin-top什么的都是浮云...

解决方案：给li设置position:relative,让他脱离标准流，当然，需要设置top:2px,至此该bug解决。

Bug-IE:

项目背景：做字体居中显示的表格

html:

1. <tr>
2. <td class="w100">...</td>
3. <td class="w150">...</td>
4. <td class="w50">...</td>
5. </tr>
6. td{
7. text-align : center;
8. }

bug表现：如果table的实际宽度不是300px;就算td设置为字居中显示，在IE里也不会居中。

解决方案：至少留一个td宽度不设置而让其自适应

Bug-Ie6:

bug表现：在IE6中，外层为relative，内层为absolute后，内层设置height：100%无效。

解决方案：外层div设置overflow:hideen;内层设置height为9999;这样各浏览器兼容。

Bug-IE6:

bug表现：因为呈现需要，在iframe指向的页面内放了<!--[if IE6]>......<![End if]>,竟导致IE6中弹出该iframe时一片空白。

解决方案：iframe的src指向的页面不能包含类似脚本。当然没有问题。

Bug-IE6/7:

html:

1. <div style="margin-left:110px">
2. <p>
3. <input type="text"/>
4. </p>
5. </div>

bug表现：input会继承外层div的margin。

解决方案：input加样式_margin-left:-110px;

Bug-IE6:

html:

1. <input type="submit" class="button" value="提交"/>
2. .button{
3. display:inline-block;
4. width:100px;
5. height:20px;
6. overflow:hidden;
7. cursor:pointer;
8. background:none;
9. background-image:url(/images/buttons.png?v=2.1.0);
10. background-repeat:no-repeat;
11. overflow:hidden;
12. }

bug描述：submit中的文字会显示一道黑点。

解决方案： 给button添加样式：line-height:0; font-size:0;border:none;

Bug-IE6:

bug描述：如果页面使用了DD-delated来兼容透明图片，某些元素的background-position会和FF中的表现不一致。

解决方案：需要将该文件涉及的标签改一下（在DD-delated设置中），以统一IE中的效果。

Bug-IE6/7/8

bug描述：当iframe中的div 没有贴紧iframe边界，此时IE6、7会显示html的白色背景（iframe页面中的白色背景），经测试：不是Iframe的背景。

解决方案：给body加background:none,html加background:none（因为FF不支持html的background的opacity设置，测试时opacity是无效的）,background:#000;filter:alpha(opacity=75)(这个是因为外面是黑色75透明底)，但此方案再IE8下也存在问题，经上网查找，设置iframe中的body的background:transparent,iframe的allowtransparency="true",截止至此，bug解决。透明的iframe无法遮挡select，所以解决方案只能是隐藏select（在js设置）。

bug-IE6:

bug描述：div的margin-top有时会失效（当为body子元素时）。

解决方案：设置为position:relative,加入top属性来解决了。

对齐问题：

html：

1. <li>
2. <label>....</label>
3. <input type="text" />
4. <span>.....</span>
5. </li>

针对<span>中的提示信息，经常与前面的信息对不齐，IE8、9、10，FF，chrome，IE6，7基本都有偏差，除了使用position:relative个别调整外，一定要使用vertical-alian:middle，效果显著，基本都解决掉了。至于前面label和input使用相同的高度，配合line-height基本效果还好。

bug-IE6

html:

1. <div style="display:block">
2. <p style="background:url(....) ..... no-repeat">........</p>
3. </div>

bug描述：当用js控制div显示时（用show()方法），p的背景无法显示

解决方案：此时在div上加入position:relative解决。

bug-IE6:

html：

1. <table>
2. <tr>
3. <td colspan="9">
4. <p>没有相应记录</p>
5. </td>
6. </tr>
7. </table>
8. p{
9. display:inline-block;
10. zoom:1;
11. vertical-align:middle;
12. background:url(...) ... no-repeat;
13. text-indexnt:20px;
14. .....
15. }

bug描述：p为行内块级元素，但在IE6中，P没有自动收缩，而是占据了一行，前面的图标在行的最左侧。

解决方案：设置p display:inline;_zoom:1 .或者用span代替P标签。

bug-IE6

html:

1. <a class="step">
2. <b>.....</b>
3. <span class="title">....</span>
4. </a>
5. .step:hover{
6. .....
7. }
8. .step:hover b{
9. background-position:-32px -243px;
10. }
11. .step:hover .title{
12. color:#000;
13. }

bug描述：b改了background-position属性，在IE6下该改变没有生效。

在该标签加了color、border、font-size等属性或在background-position后面加!important试图触发该样式的改变，始终没有生效。

解决方案：加属性border-bottom:1px solid #f7f7f7;即该样式确实是能看到效果的，只是调整为真实情况下和不加该样式没差别。

网站ICon设置：

favicon.ico放在网站根目录。

在网页上设置

此方式兼容IE6+\FF\chrome。 一般IE会等几天才显示出来该图标。

实现如下的剧中(兼容IE8+)

html:

1. <div class="shadowSquare fl ml20 tc">
2. <p class="f14">
3. 累计奖励金额: <span class="redText1">100</span>
4. <br/>
5. 预计分成金额: <span class="redText1">100</span>
6. <br/>
7. 实际总收入: <span class="redText1">100</span>
8. </p>
9. </div>

style:

1. .shadowSquare{
2. box-shadow:2px 3px 5px #ccc;
3. width:245px;
4. height:130px;
5. background-color:#fff;
6. display:table
7. }
8. .shadowSquare p{
9. display:table-cell;
10. vertical-align:middle;
11. color:#4d4d4d
12. }

IE6bug:

1、代码&&效果如下：

1. .myxyLeftMenu .list dt,.myxyLeftMenu .list dd{
2. height:30px;
3. line-height:30px;
4. background-color:#ccc
5. }
6. .myxyLeftMenu .list dd a{
7. display:block;
8. color:#333;
9. text-indent:43px;
10. width:100%;
11. background-color:pink
12. }

2、代码&&效果如下：

1. .myxyLeftMenu .list dt,.myxyLeftMenu .list dd{
2. height:30px;
3. line-height:30px;
4. background-color:#ccc
5. }
6. .myxyLeftMenu .list dd a{
7. display:inline-block;
8. color:#333;
9. text-indent:43px;
10. width:100%;
11. background-color:pink
12. }

二者区别就在display属性上。

bug-IE6

问题描述：IE6不支持负margin

解决方法：给该元素添加position:relative

布局问题：

解决方法：根据padding + 绝对定位的方式将两个图标挂在两边。

1. .wrap
2. {
3. height:25px;
4. position: relative;
5. padding:0 80px 0 40px
6. }
7. .UI-money {
8. position: absolute;
9. top: -5px;
10. left: 0
11. }
12. .UI-cuteGirl {
13. position: absolute;
14. top: -35px;
15. right: 0
16. }
17. ```javascript
19. #####IE6bug:
20. ######问题描述：当元素不设置width和height的情况下，仅仅依靠内部元素撑起。此时该元素又恰好是position:relative作为内部absolute元素的定位参考元素，那么在IE6下面，内部的定位会从除去padding的位置开始按照left top来做定位，而其它浏览器都是按照padding在内的位置开始计算，这才是正确的显示。
21. ######解决方法：将该外层元素(即position为relative的元素)设置zoom:1触发layout，那么IE6将呈现与其他浏览器一致的状态。
22. > 没有设置zoom时的状态：
23. <img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/86b5a548-6e4f-4a84-97ba-cffdbb533191.png" border="0" alt="" name="" height="41" width="284">
24. > 设置完zoom的状态：
25. <img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/2234b90b-339d-49be-a96e-cceb3f3082ac.png" border="0" alt="">
28. ######关于浮动的问题：
29. * 如果外层的尺寸固定，那么内部有两个float也无所谓，此时用不到外层随内层适应的问题。
30. * 当如果外层的尺寸需随浮动的子元素自适应高度，那么可以这样解决：
31. ```javascript
32. div1{
33. float:left;
34. width:22px;
35. height:100%;
36. margin-right:10px;
37. _margin_right:-3px; //解决IE6下的3像素bug
38. }
39. div2{
40. display:inline-block;
41. }

此时外层元素随div2的高度自适应，但此时的问题是：

如果左侧浮动元素div1的高度设置了100%，但实际上它无法达到外层元素的高度，也就是无法计算，因为外层元素的高度没有显式定义。

但如果此时你明确定义过div2的高度，那么你就可以使用这种方式做浮动布局。

值得一提的是，就算外层设置上min-height，内部的左侧浮动元素依然无法设置100%高度布局，但是你可以使用这种方式使布局更整齐。IE6除外。

• • 在外层不使用min-height的情况下，IE6&7中外层元素会自适应到左侧浮动元素的高度，但其他浏览器中外层元素则不会按左侧元素自适应，只会按右侧元素自适应。
    min-height的问题如果使用hack这样修复后：
    1. {
    2. height:auto!import;
    3. height:1100px;
    4. min-height:1100px;
    5. }

    方案解释：以上代码指定在除IE6的浏览器中，height为1100px且是auto的，IE6下因为不识别!import，那么IE6只会使用到height:1100px这个样式，那么将达到min-height:1100px的效果，因为如果内部的元素的高度大于这个高度，IE6下外层元素依然会被撑起。

  • 让我们再来看看这个解决方案，在IE6下，因为使用了height样式且为固定的值，那么内部元素的百分比高度得以被计算。但在其他浏览器中，由于我们实际使用的样式是height:auto和min-height,那么将不会使得左侧浮动元素得到正确的100%的高度。

    最后还是回顾下clearfix这个终极方案：

    1. .clearfix:after {
    2. visibility: hidden;
    3. display: block;
    4. font-size: 0;
    5. content: " ";
    6. clear: both;
    7. height: 0;
    8. }
    9. .clearfix{*zoom:1;}

    它大致就是利用:after伪属性来给外层元素加一个after块级后置元素，并设置该子元素为不可见，并在上面设置clear:both清楚浮动，来使得父元素可以高度自适应。而*zoom:1是考虑到IE6&7不支持:after伪属性。

百分比宽高的渲染

• 如果一个元素内部有定位元素且该定位元素是按百分比定义width和height:

  那么在IE6下，如果外层元素的宽高没有显式定义，那么内部的定位元素的百分比宽高将不会被渲染，其他浏览器则都可以按照外层元素的实际高度进行渲染。

  但是对于非定位元素，如果外层仅仅因为内部元素使得自身高度被撑起，此时内部的子元素如果设置了height:100%，那么将不会按100%进行和该父元素一样的高度渲染。这个特性并不会因为该子元素的浮动属性有所改变。

img与块级元素

• 当用负边距做这么一个布局：
  

能少则少，所以使用了这样的html:

1. <div>
2. <img src='' id='left'/>
3. <div id='right'></div>
4. </div>

样式可以这样:

1. img{
2. float:left;
3. margin-left:-100px;
4. }

也就是说，我们不用对IE6做任何的hack就可以解决问题。

但如果将img的样式改成这样:

1. {
2. float:left;
3. display:block;
4. margin-left:-100px;
5. _position:relative;
6. _margin-left:-50px;
7. }

也是OK的，也就是说,img很多时候表现得像一个块级元素，但它和块级元素的渲染还是有差别。

如果img是用一个div标签写的，那么该标签的样式应该是：

1. #left{
2. float:left;
3. margin-left:-100px;
4. _position:relative;
5. _margin-left:-50px;
6. }

或这样：

1. {
2. float:left;
3. margin-left:-100px;
4. _display:inline
5. }

也是OK的。

DDpng引起的问题

问题描述：当图片起初为display:none, 而后又被脚本显示出来时，IE6下的png会仍然无法显示出来。

解决方案：每次将处于这些情况下的图片进行处理，要么使用jpg，要么控制其不使用DDpng的处理，很挫哈，没办法哎...