Mac竖线一像素误差问题 - niuben/niuben.github.io GitHub Wiki

HTML代码

<td class="w-20">
     <span class="download">    
             <a href="http://yuntu.amap.com/api/table/56978c62305a2a2fb91c467d/export?v=1&cid=1&type=1&zip=0" id="table-remove-56978c62305a2a2fb91c467d" target="download" data-cnzz="我的地图下载">下载</a>   |   
             <a href="javascript:void(0)" id="table-remove-56978c62305a2a2fb91c467d" class="remove" data-cnzz="我的地图删除">删除</a>  |    
     </span>
     <a class="update" href="//yuntu.amap.com/datamanager/table.html?action=update&tableid=56978c62305a2a2fb91c467d" data-cnzz="进入地图">进入地图</a>
</td>

TD css样式

table td {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    color: #666;
    text-align: center;
    overflow: hidden;
}

span css样式

 span.download {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -115px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    color: #0091ff;
}

Mac上文字不对齐主要原因是TD的line-height是个奇数无法被2整除;解决方案是让行高成为一个偶数。

⚠️ **GitHub.com Fallback** ⚠️