safari浏览器数字显示长度不一致的问题

最新推荐文章于 2024-07-01 18:21:52 发布

花生地瓜

最新推荐文章于 2024-07-01 18:21:52 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/u013018357/article/details/58178576

版权

查了一下原因是safari的浏览器对数字0和1的渲染方式不一样导致的。0会比1宽，所以长度不一样，所以需要全部转换成全角数字，就可以了。
![这里写图片描述](https://img-blog.csdn.net/20170227174221158?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzAxODM1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

这个是在safari浏览器看到的。其他浏览器都是正常的对齐
html页面是：

${re.startTime}</em>-<em class="time-em2">$ {re.endTime}

用js控制数字转成全角，并再次写到html页面上:

//转全角的代码
function toDBC(str){
    var result = "";
    var len = str.length;
    for(var i=0;i<len;i++)
    {
        var cCode = str.charCodeAt(i);
        //全角与半角相差（除空格外）：65248(十进制)
        cCode = (cCode>=0x0021 && cCode<=0x007E)?(cCode + 65248) : cCode;
        //处理空格
        cCode = (cCode==0x0020)?0x03000:cCode;
        result += String.fromCharCode(cCode);
    }
    return result;
}
    $(".year-li .time-em1").each(function(){
       var text = toDBC($(this).html());
        $(this).html(text);
    });
    $(".year-li .time-em2").each(function(){
        var text = toDBC($(this).html());
        $(this).html(text);
    });