标签：
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
