Question

我需要创建一个密码屏幕，我可以在其中显示如下的数字

我可以使用＆＃34;显示：Flex＆＃34; CSS属性，但它与旧版浏览器不兼容（如Android 4.2.2浏览器）。

如何使其兼容？

<div class="ILS_lock">
<div class="ILS_numbers-row">
  <div class="ILS_digit">1</div>
  <div class="ILS_digit">2</div>
  <div class="ILS_digit">3</div>
</div>

          .ILS_lock {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: {{backgroundColor}};
      }
      .ILS_lock-hidden {
        display: none;
      }
      .ILS_label-row {
        height: 50px;
        width: 100%;
        text-align: center;
        font-size: 23px;
        padding-top: 10px;
        color: {{textColor}};
      }
      .ILS_circles-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 60px;
      }
      .ILS_circle {
        background-color: {{backgroundColor}}!important;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        border:solid 1px {{textColor}};
        margin: 0 15px;
      }
      .ILS_numbers-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 100px;
      }
      .ILS_digit {
        margin: 0 14px;
        width: 80px;
        border-radius: 10%;
        height: 80px;
        text-align: center;
        padding-top: 29px;
        font-size: 21px;
        color: {{buttonTextColor}};
        background-color: {{buttonColor}};
      }

JsFiddle链接 - ＆gt; https://jsfiddle.net/sandeshbsuvarna/0nxrbckm/2/

Answer 1

使用Autoprefixer使CSS兼容。像魅力一样工作。

以下代码与＆lt;兼容Android 4.2.2浏览器

      .ILS_lock {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      .ILS_lock-hidden {
        display: none;
      }
      .ILS_label-row {
        height: 50px;
        width: 100%;
        text-align: center;
        font-size: 23px;
        padding-top: 10px;
      }
      .ILS_circles-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
        height: 60px;
      }
      .ILS_circle {
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin: 0 15px;
      }
      .ILS_numbers-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
        height: 100px;
      }
      .ILS_digit {
        margin: 0 14px;
        width: 80px;
        border-radius: 10%;
        height: 80px;
        text-align: center;
        padding-top: 29px;
        font-size: 21px;
      }

如何使CSS flex属性与旧版浏览器兼容？

1 个答案: