常见的浏览器兼容及一些解决方案
-------- 由于各大主流浏览器由不同的厂家开发,使用的内核版本是不一样的,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床
---------以下是一些常见的兼容性问题(^ _ ^):
1、 不同浏览器的标签默认外补丁margin和内补丁padding不同
解决方法:
hack1: 使用css通配符设置margin和padding为0,
hack2: 或者给每个有内外间距的标签设置margin和padding为0
2、 给子元素添加margin-top后,浏览器会错误的把margin-top给了父元素
解决方法:
hack1: 给子元素或者父元素设置浮动(float)
hack2: 给父元素添加上边框(border-top:)
hack3: 给父元素添加overflow:hidden;
3、 在网页中插入图片时,图片会向下方撑大大约三像素。
解决方法:
hack1: 使用 vertical-align:top/bottom/middle解决,使用其中一个即可
hack2: 使用 display:block;改变元素类型也可以解决
4、 块属性标签float之后,又有横向的margin值,在IE6中显示会比设置的大(IE6双边距bug)
解决方法:
hack1: 在float标签样式控制中加入display:inline
5、cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明(鼠标指针bug)
解决方法:
hack1: 直接使用cursor:pointer
hack1: 给图片加border:0;或者border:none;
7、 使用表单元素时,表单元素距离顶部间距不一致
解决方法:
hack1: 给表单元素添加浮动:float:left;
8、 浏览器的字体不统一
解决方法:
hack1: 给body统一设置字体
9、 浏览器的透明度兼容
解决方法:
一条代码全解决:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
10、 谷歌浏览器最小字号支持到12px,12px以下的字号不支持
解决方法:
hack1: 直接切图
hack2: 在html或者body里添加一句谷歌浏览器专有的属性:-webkit-text-size-adjust:none;(新版本的谷歌浏览器里已失效)
hack3: 使用CSS3的一个缩放属性:transform:scale(),来使字号改变大小
11、在IE7或者IE6及以下版本中,部分块元素拥有默认高度(在16px左右;)
解决方法:
hack1: 给元素添加声明:font-size:0;
hack2: 给元素添加声明:overflow:hidden;
12、 在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加 50%大于100%的情况。(也会受系统影响)
解决方法:
hack1:给右面的浮动元素添加声明:clear:right;
13、如果设置了input的高度,在其他浏览器上显示的value的内容是垂直居中的,但是在ie6上是在顶部的
解决方法:
hack1: 给input添加一个行高等于它的高度。