那些关于IE6的问题

来源：互联网发布：淘宝分销商招商方案编辑：程序博客网时间：2024/05/22 06:24

CSS HACK 写法问题：

height:10px;=>for all standard explorerheight:8px\o;=>only for IE8*height:7px;=>for IE6 & IE7_height:6px;=>only for IE6

IE6浮动问题：

<li><a href="">link to www</a></li>li{ float:left; }a{ display:inline-block; }<!-- 此时，【display:inline-block;】属性是好用的，a元素不能display:block;,否则li不能浮动。 --><li><a href=""><img src="" /></a></li>li{ float:left; }a{ display:inline-block;width:mmpx; height:mmmpx; }<!--  要设定宽度和高度以包住图片，否则会很诡异。 -->

IE6定位问题：

<li class="father"><a href="">positon</a><ul class="sun"><li><a href="">something to www</a></li></ul></li>.father{ positon:relative; *z-index:999; }<!--ie6中，必须设置父元素【z-index:999】，否则弹出菜单会被其他元素遮盖。 -->.sun{ position:absolute;z-index:999; }<!--z-index的值只在兄弟节点之间有效，具有强烈的传递性。父容器不可能遮盖子容器。-->position:absolute; 对 cursor:pointer; 失效，需要加个背景即可。*background:#fff;  *filter:alpha(opacity:0);

IE6高度及行高问题：

.space2{ height:2px; *font-size:0;*line-height:0; }/* ie6的最小高度会受到字体和行高的影响。*/

<div>文字</div><!-- =》line-height:45px;   //则DIV高度为45px，且文字居中。一个空DIV的高度为0，当DIV中放入文字时高度产生了！为什么呢？是文字的大小把它撑开了吗？不是！是文字的line-height行高把DIV撑开了，且line-height使文字具有居中效果！所有浏览器都一样。--><div><img src="" />文字</div><!--  当文字和图片混排时，标准浏览器还是一样，但是IE6却不认识line-height行高了！-->

文本与图像的居中问题:

浏览器解释有差异，可通过怪异方法解决<p><a href="#">文字</a><a href="#"><img src="" /></a></p>img{margin-bottom:-5px;}//适当调整img元素的这个属性可解决文字与图片的居中问题。兼容性良好。

神奇的负margin:

负margin能够拉近元素之间的距离，并影响文档流的后续元素。
而position定位只对本元素有影响。
eastmoney.com的帽子效果！

BOX MODEL：
the BOX MODEL is assist of Margin Border Padding and Content
When you set the width and height properties of an element with CSS,you just aet the width and height of the Content area.
to calculate the full size of an element,you must also add the padding borders and margins.
IE8 and earlier versions of IE,included padding and border in the width property. to fix this problem,add a<!DOCTYPE html>to the HTML page.

文字阴影(相当不好用啊还是用图片吧)：
zoom:1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=120, color=#f0f);

【text-indent】属性只对【display:block;】的元素有效。

ie6依赖【overflow:hidden;】属性来隐藏超出的内容。