判斷是否支持
//1px兼容處理，判斷當前系統(tǒng)能否渲染出0.5px
;(function (window) {
var docEl = window.document;
var bodyEl = docEl.getElementsByTagName('body')[0];
if (window.devicePixelRatio && window.devicePixelRatio >= 2) {
var testEl = docEl.createElement('div');
testEl.style.border = '.5px solid transparent';
bodyEl.appendChild(testEl);
if (testEl.offsetHeight === 1) {
bodyEl.classList.add('hairline');
}
bodyEl.removeChild(testEl);
}
})(window);
方案一、簡單粗暴的方式
給全部元素預設(shè)置邊框?qū)挾?/p>
防止ios有的機型0.5px不顯示，或者圓角時候有缺口，設(shè)置為0.75
.hairline *, .hairline *:before, .hairline *:after {
border-width: 0.75PX !important;
border-bottom-width: 0.75PX !important;
border-top-width: 0.75PX !important;
border-left-width: 0.75PX !important;
border-right-width: 0.75PX !important;
}
方案二、添加全局css
.hairline {
.lineTop {
border-top-width: 0.75px !important;
}
.lineLeft {
border-left-width: 0.75px !important;
}
.lineRight {
border-left-width: 0.75px !important;
}
.lineBottom {
border-left-width: 0.75px !important;
}
}
html中使用
給用到邊框的元素加上class名稱
<div class="lineTop lineBottom" style="border-top: 1px solid red;border-bottom: 1px solid red;"></div>
