安卓和ios的lineheight的不一样如何解决?
lineheight在pc端上显示很正常,但是在手机就很不同,在iphone6上,设置了lineheight,但是文本上面多了几像素,如果你设置lineheight在35px一下的按钮(用span做的),会发现很明显的不水平居中。
百度寻找,发现是手机渲染不一样,但没有用css怎么去兼容的问题,于是我就想了用js做一个浏览器的判断,去做兼容
js代码如下:
//检测android系统还是ios
var client = function(){
var system = {
ios: false,
android: false
};
var u = navigator.userAgent;
if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))system.ios = true;
if(u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1)system.android = true;
return {
system: system
};
}();
//jq代码
$(function(){
//andriod和ios的line-height的问题
function lineHeight(ele){
var lh = parseFloat(ele.css(‘line-height‘));
function iosLine_heiht(){ //如果做项目的哇,这里设置传参,参数为触发效果的节点元素
ele.css({
‘line-height‘: (lh-1) + ‘px‘,
‘padding-top‘: ‘1px‘
});
}
function andriodLine_heiht(){
ele.css({
‘line-height‘: (lh-2.5) + ‘px‘,
‘padding-top‘: ‘2.5px‘
});
}
if(lh<35){ //当行高小于35,才这么做,否则不这么做
if(client.system.ios) iosLine_heiht();
if(client.system.android) andriodLine_heiht();
}
}
//输入是否是ios或andriod
$(‘#box‘).html(‘system.ios:‘+client.system.ios+‘<br />‘+‘system.android:‘+client.system.android);
//调用
lineHeight($(‘.lh‘));
显示效果如下:

文章来自:http://www.cnblogs.com/liangcheng11/p/5829287.html