<div style=”position: absolute; left: 0; top: 0;”>
<div style=”height: 24px;”>title</div>
<div style=”width: 100px;”>body</div>
</div>
就这么简单的一段绝对定位的应用，ie6和 ie7
中都有bug，而且bug表现还不一致
原因是 绝对定位
的父元素，直接后代
不能有任何 haslayout
这个bug在ie6中的表现是父元素自动撑满
在ie7中的表显示 有haslayout的子元素自动包裹
fuck ie6 & ie7 again
http://necolas.github.com/normalize.css/
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
Normalize.css是一份定制的css文件，它可以让浏览器使用一致的方式渲染所有元素并且符合标准。
可以把Normalize.css当作css reset使用，当然它和yui css reset等还是有一定区别，yui css reset是个强力的reset，而Normalize.css更注重一致性。
google code http://code.google.com/p/zen-coding/
#page>div.logo+ul#navigation>li*5>a
快速生成
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
phpstorm中提供了zen coding 支持，其他IDE可以去google code上查看插件
1.利用IE6 不支持> 选择器(子选择器)
F { color: red; }
E > F { color: green; }
IE6 为红色 其他all绿色
2. 利用IE6 对!important的错误理解
color: green !important;
color: red;
IE6 为红色 其他all绿色
以上两种方式，在高级的IDE中，不会出现错误提示~所以还是比较漂亮的~(如果你的IDE在遇见 *color: red;的时候不能给错误提示，建议还是换换吧，推荐webstorm)
还是，能不要hack就不要hack啦
IE6 IE7 很可恨吧？？
<div>
<input type=”checkbox” />
</div>
div { border: 1px solid black; }
input { margin: 0; padding: 0; }
在除了IE6 IE7的浏览器中 checkbox都是贴着div的左边框和上边框的，有个解决办法，就是给checkbox设置上高度和宽度 都为13px
input { margin: 0; padding: 0; height: 13px; width: 13px; }
真纠结啊，fuck IE6 IE7 again
$(document).ready(function () {
if ($.browser.msie && $.browser.version == ’7.0′) {
$(‘html’).addClass(‘ie7′);
}
if ($.browser.msie && $.browser.version == ’6.0′) {
$(‘html’).addClass(‘ie6′);
}
});
这是Extjs使用的方法
就是给html加一个class 表明是ie6 或者 ie7 (或者你其他浏览器用正常方法也搞不定兼容)
这样在css里面就可以用 .ie6 .someclass ; .ie7 .someclass 这种方式来做一些傻×IE的bug修正之类的事情
这样避免使用css hack 也可以部分替代css 条件注释
其实还是推荐css条件注释，因为这种方法在浏览器渲染慢的情况下，能看出来从修正之前的样式闪到修正之后样式的 那个闪动的过程
原文：http://www.css88.com/archives/1584
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起， 而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的 表现不一样。
但是当父元素是display:inline-block 时，无此问题！！！应该是haslayout无此问题
当父元素设置了padding，里面子元素有浮动或者绝对定位时可能发生双倍padding-top
解决方法：
1、定义父级元素的高度
2、给父级元素添加display:inline-block;
在给一个单独的input type=button 设置line-height 时，在firefox里面是失效的，如果有文字跟着，就没有问题
比如
<div style=”line-height: 40px;”>
<input type=”button” />
</div>
这样是失效的，外面的div不会被撑起成40px高
但是
<div style=”line-height: 40px;”>
<input type=”button” />有字就ok
</div>
就可以正常显示
google 了一下 http://www.cssnewbie.com/input-button-line-height-bug/
原因在于firefox给input type=button等设置了默认的line-height
button, input[ type= "reset" ] , input[ type= "button" ] , input[ type= "submit" ] { line-height : normal !important; } 可以在input后面加一个空格 这样就ok了
ie 6&7真是bug一堆堆！！
又碰到一个：
点评：position和float是两种布局模式，在IE6下共用有时会导致用position定位的元素节点消失。绝对定位的元素节点是参照离它最近的已定位元素，所以父节点定位relative、子节点定位absolute是很常见的。
-
overflow:hidden失效
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug
我的办法：子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了。
