1. IE6 下双倍浮动问题,display: inline 因为元素是浮动的,display 属性不会影响显示方式。
2. IE6 3px 文本偏移bug,浮动元素设置 margin-right: -3px。
3. min-width 和 min-height 只有 IE6不支持, 对于 height IE6 默认为最小高度,但是width 不是最小宽度。
4. <div><img src='1.jpg' /></div>
所有浏览器图片下方有空隙,通过设置如下属性可以避免。img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom
5. 如何让元素与文本输入框居中对齐,只要设置 输入框 vertical-align: middle; 元素设置 display: inline 或者 display: inline-block;
6:定义 1px 在IE6 下,设置 { height: 1px; overflow: hidden; } 或者 zoom: 0.07(小于 0.07也可)
7: hack:
_ IE6 支持;
* IE6 和 IE7;
\9 IE6和IE6+浏览器 Chrome 和Firefox 不支持
\0 IE8 和 IE8+ 支持
!important 所有浏览器都识别,所有浏览器都认为它的优先级最高,除了IE6不会提高它的优先级。
div { background:red; background:green !important;}
或div { background:green !important; background:red; }
除了 IE6, 所有浏览器都为 绿色,IE6 第一个为绿色,第二个为红色,所以建议 important 放在后面来写。 如果写成 div { background:green !important;} IE6 下也是绿色的。
8: Firefox 对于输入框input 不能设置 line-height的值,而chrome 默认input 里的文字就是垂直居中,设置line-height 只有大于input 的高度才起作用,所以一般通过 padding 填充input 框的高度。
chrome 中文版本不能设置 font-size 小于12px。
9: 盒子模型: IE6 在混杂模式下使用自己的非标准盒模型 width = 内容 + 内边距 + 边框总和。
10: 对于行内元素 比如 span, 设置 width height margin-top margin-bottom padding-top padding-bottom border-top border-bottom是不起作用的, 而 line-height margin-left margin-right padding-left padding-right border-left border-right 是起作用的。
专业术语: 垂直内边距、垂直边框和垂直外边距 不影响行内框的高度,修改行内框的尺寸的唯一方法是修改行高或者 水平内边距、水平边框和水平外边距。
PS: 虽然 padding-top padding-bottom border-top border-bottom 不能改变行高,但是border-top 和 border-bottom 设置完能显示上下边框, 而当这个元素设置背景颜色的时候 padding-top padding-bottom 能显示背景颜色。
来源:https://www.cnblogs.com/zhengming2016/p/5535220.html