常见浏览器的兼容
A、跟img相关的兼容以及解决方法
1) 图片有边框BUG
描述:当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:none;
img{border:0;/*border:none;*/}
2)图片缝隙
描述:在网页中插入图片时,图片会向下方撑大大约三像素。
hack1:将<img>转为块状元素,给<img>添加声明:display:block;
img{display:block}
hack2:给img添加声明 vertical-align:top/middle;
img{vertical-align:top;/*vertical-align:top;*/}
B、表单相关的兼容以及解决方法
1)表单元素距离顶部间距不一致
hack:给表单元素添加声明:float:left;
input{float:left;}
C、其他相关兼容和解决方法
1)margin-top的兼容
子元素没设置任何浮动,设置了margin-top属性后,会错误的把margin-top的属性值添加给父元素
hack1:给子元素或者父元素设置浮动
.box{float:left;}
或者
.box p{float:left;}
hack2:给父元素添加上边框
.box{border:1px solid #fff;}
hack3:给父元素添加overflow:hidden;
.box{overflow:hidden;}
2)鼠标指针bug
描述:cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明。
hack:cursor:pointer
div{cursor:pointer;}
3)透明属性
兼容其他浏览器写法:opacity:value;(value的取值范围0-1;)
div{opacity:0.5;}
IE浏览器写法:filter:alpha(opacity=value);取值范围 0-100(整数)
div{opacity:0.5;filter:alpha(opacity=50);}
4)谷歌浏览器最小字号支持到12px,12px以下的字号不支持
hack1:直接切图
hack2:在html或者body里添加一句谷歌浏览器专有的属性
html,body{ -webkit-text-size-adjust:none; }
/* 注意点:在新版本的谷歌浏览器里已经无效。*/
hack3:CSS3的一个缩放属性:transform:scale()
.a3{font-size: 10px;transform: scale(0.83);float: left;transform-origin: left;}
/*这个数字0.833,是缩放比例,可以根据你自己的情况不同而不同。*/
5)所有浏览器的字体不统一
hack:给body统一设置字体
body{font-family:微软雅黑;}
IE浏览器的相关兼容
A、图片png24格式的兼容,png24格式在IE6上不透明
hack1:把png24格式换成png8或者GIF格式
hack2:代码如下
div{
background:url(i/bg.png) no-repeat 0 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='static/css/i/bg-deal-price.png');
}
B、默认高度 (如果是需要看不见一定要加height:0;如果是需要其他的数值,那么就给其他的数值)
描述:在IE7或者IE6及以下版本中,部分块元素拥有默认高度(在16px左右;)
hack1:给元素添加声明:font-size:0;
div{height:0;font-size:0;}
hack2:给元素添加声明:overflow:hidden;
div{height:0;overflow:hidden;}
C、双倍浮向(双倍边距)(只有IE6出现)
描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界(margin)加倍显示。
hack:给浮动元素添加声明:display:inline;
li{float:left;margin-left:20px;display:inline;}
D、在IE6及更低版本的浏览器里,如果想去掉input的默认边框,不能设置border:none;
hack:设置input{border:0;}
img{border:0;}
E、如果设置了input的高度,在其他浏览器上显示的value的内容是垂直居中的,但是在ie6上是在顶部的
hack:给input添加一个行高等于它的高度。
input{height:28px;line-height:28px;}
F、在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)
hack:给右面的浮动元素添加声明:clear:right;
div{clear:right;}
G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。
hack:给li添加一个 +margin-top:-3px或者-4px
li{+margin-top:-3px;}