标签： css

对于开始隐藏的层(有display:none;的层)只要加上float:none;就可以解决ie6的占位问题
—————————————————————————————-
制作了一个新页面，尝试完全自己编写tab标签效果。很快就编辑好了，效果非常的赞，在火狐和ie7运行完好，很兴奋，但是，在ie6上我又一次萎靡了~唉~
<div id=”a1″ >图片</div>
<div id=”a2″ style=”display:none”>图片</div>
<div id=”a”>
<div id=”a1″>第一个标签</div>
<div id=”a2″>第二个标签</div>
</div>
用这样的写法不知道为什么在ie6中总是走形，找了半天原因，主要是display:none隐藏层后，虽然看不到了，但还是占了一定的位置。
这让我很头疼，知道原因了，希望只动小部分代码或者css就改变现状，然布局恢复正常，但是都把自己弄睡着了也没有解决=。=
最后，只能退而求其次，用了个比较猥琐的方法，干脆把标签部分和切换层部分用两个大的层分隔开，居然就好用了~不解。
总之碰到这样的问题，你也找不到方法就先用这个方法将就一下，我现在还在寻找最好的方法，如果你有更好的方法，拜托分享一下，不胜感激：）

做完了一个页面，只对FF和IE7做了兼容，之后在IE6下进行测试，整个内容都缩小了。
经过检查，发现是大多数（强调大多数很重要）的line-height失效，查看一下资料，了解到是因为li中加入图片，会导致line-height失效如
<ul>
<li><a href=”#”>1.css</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>2.li</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>3.热门</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>4.模板</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>5.百度</a></li>
<li><a href=”#”>6.google</a></li>
<li><a href=”#”>7.搜索</a></li>
<li><a href=”#”>8.解决办法</a></li>
</ul>[来源于http://bbs.blueidea.com/thread-2877695-1-1.html]

解决方法其实很简单，只要不在li中体现出图片的加入就可以，我们可以用很多方法来添加这个图片，虽然都比上述代码麻烦[谁叫ie6流氓呢]。推荐使用把图片单独放在一个li里。

其他方法参考下面：
1.用padding把li撑起来
2.单独把图片写在css中 background

附上其他关于IE6中line-height的失效问题和解决方法：
来源：蹄子流落人间 http://hi.baidu.com/ssl346/blog/item/594eb018bb5069b34aedbcee.html

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2：

受影响的浏览器：
Microsoft Internet Explorer 5.01 / Windows
Microsoft Internet Explorer 5.5 / Windows
Microsoft Internet Explorer 6&nbsp;

解决方法：
对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle

当你去设定一个div高度为小于该div字体时，发现height指定的值失效。

不管你怎么调小高度他还是那么宽~FF就不会出现这样的问题~
ie6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 1px; 来定义了一个 div 的高度，实际在ie6下显示的仍然是一个字体大小高度的层。
解决办法：

<div style=”height: 1px; overflow: hidden;”></div>

问题跟进

其实上述的解决办法在设计时看来并不实用，最近看资料又发现既然ie6 会固执的认为这个层的高度不应该小于字体的行高，那么我们可以在标签内部或者css中设置字体大小

font-size:1px;

就可消除默认行高。