1.几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用
使用float属性为img布局（尽量使用）
如果使用margin，可能会引起兼容(不建议使用)
2.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的 margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上 display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
在display:block;后面加入*display:inline;*display:table;
3.如何解决Chrome在应用transition时页面闪动的问题？
解决：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
4.ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效.
在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
5，字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）
6.当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。
在行内元素里加入{zoom：1}
7.多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。
给浮动元素添加display:inline;
8.z-index不起作用的 bug
1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。
这种情况发生的条件有：
1、父标签position属性为relative；
2、问题标签含有浮动(float)属性。
2）所有浏览器：它只认第一个爸爸
层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。
9.绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值。
10.Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative
网友评论