Граница меток была установлена на 0,5 пикселя;Под Safari он обнаруживается незавершенным.некоторые с левой границей исчезают, некоторые с правой границей.
После тестирования я нахожу некоторые правила, только текст на китайском языке не имеет границы.
Это ошибка сафари на iPhoneX и какя могу это исправить?Спасибо.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
font-family: PingFangSC-Regular;
}
.normal-label{
margin: 0 52px;
text-align: center;
}
.label-item{
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
}
.label-item-first-active{
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>
Снимок экрана под iPhoneX: 