У меня проблемы с iOS. Я не знаю, почему iOS всегда генерирует около 1px в ширину.
У меня есть HTML, как это:
<div id="serviceMenu">
<ul class="cf">
<li>
<a class="btn" href="technology.php">
<img src="../common/imgs/slide/svc02.png" alt="">
<p>Mot</p>
</a>
</li>
<li>
<a class="btn" href="facility.php">
<img src="../common/imgs/slide/svc03.png" alt="">
<p>Hai</p>
</a>
</li>
<li>
<a class="btn" href="shop.php">
<img src="../common/imgs/slide/svc04.png" alt="">
<p>Ba</p>
</a>
</li>
<li>
<a class="btn" href="fare.php">
<img src="../common/imgs/slide/svc05.png" alt="">
<p>Bon</p>
</a>
</li>
</ul>
</div>
Я использую CSS так:
#serviceMenu ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
#serviceMenu ul li {
width: calc(50% - 5px);
width: -ms-calc(50% - 5px);
width: -webkit-calc(50% - 5px);
margin-right: 10px;
margin-left: 0px;
margin-bottom: 10px;
}
#serviceMenu ul li:nth-child(2n) {
margin-right: 0px !important;
}
Он хорошо работает на Android и Chrome, но в Safari он выходит на новый уровень.
Но если я немного отрегулирую ширину, она будет работать хорошо.
#serviceMenu ul li {
width: calc(50% - 5.5px);
width: -ms-calc(50% - 5.5px);
width: -webkit-calc(50% - 5.5px);
margin-right: 10px;
margin-left: 0px;
margin-bottom: 10px;
}
Можете ли вы объяснить мне?