IE6

IE7

IE8

1：li边距“无故”增加任何事情都是有原因的，li边距也不例外。先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。

2：分页数字 字体用“Arial ”加粗不抖动         

分页样式

3：IE6 CSS选择器区分IE6 IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。 /*IE6 专用 */ .content {color:red;} /* 其他浏览器 */ div>p .content {color:blue;}

4：IE6最小高度 IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法： 使用ie6不支持但其余浏览器支持的属性!important。 #container{min-height:200px; height:auto !important; height:200px;}sp;{color:blue;}

5：IE6100% 高度 在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得 先给html和body定义height:100%;。n> sp;{color:blue;}

6：IE6躲猫猫bug 在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一 些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。 解决方法很简单： 1.在（那个未浮动的）内容之后添加一个  2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会 产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

9: Overflow Bug 在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上 position:relative;。

10: 横向列表宽度bug 如果你使用float:left;把

15：链接a的title属性中的文字换行我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的 文字，常常用来加一些提示语句，比如说点击查看详情之类的，代码形如：链接xx。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话，怎么实现呢。第一 反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的， 找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了： [05-31]  关于对我校2006年至2009年发展党员工作情况进… 注意到了吗。。很简单，只要使用 这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相 当不错，而且是浏览器原生的效果，安逸。哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。

16：如何去掉点击链接时的虚线解决方案1：在 Mike blog 解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。如，blur.htc 文件内容如下：  在 CSS 中加入如下代码： A { behavior:url(blur.htc); } 解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a {blr:expression_r(this.onFocus=this.blur())}如果是FF等浏览器的话可这样写 a{ouline:none;}

17:制作1px细线表格解决方案1 ( 推荐)：我们只要给这个table一个border-collapse:collapse的样式，就可以达到这个效果了。 具体如下： 1、HTML结构: 

18：IE6 下z-index无效在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要 是 relative，absolute或是fixed。z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。1、关于效果截图的些必要说明下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。以下所有结果截图的大背景如下： 1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

  

  

 

 

  

 

 

 

 

  

 

 

19：css reset中的list-style:none在IE6,7下,当UL不具有float:left;display:inline;时: 无论有没有list-style:none这个属性,列 表符都被隐藏,不占位置(下面代码中的5,6) 当UL具有float:left;display:inline;属性时 list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside); 未 设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)在firefox中只要list-style-type为none ,则 无论list-stype-position的值为outside或 inside , list-style都能很好的被隐藏 而在IE6,7中,仅 设置list-style:none,并不足以解决所有问题 所以我认为在css reset的时候使用 list-style:none outside none 更好

20：链接去边线（完全兼容）a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}21: display:inline-block 额外产生的6PX 或者4px margin今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的 4px的margin-right。原始代码.YP_timelineChart_box li{ display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-indent:-3000px; width:5px; vertical-align:bottom; background-color:#00FF00; position:relative; }页面渲染结果： 每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover 状 态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：把原来的HTML 代码结构：更改为：这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。