Safari на iOS не работает точно с calc CSS (протестировано на iPhone 6 и выше) - PullRequest
0 голосов
/ 05 сентября 2018

У меня проблемы с 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;
}

Можете ли вы объяснить мне?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...