html - iOS上奇怪的CSS宽度和高度

我在iOS上遇到width和height属性问题，而在PC上的Chrome上运行正常。

在Chrome上正常运行：



在iOS上，相同的代码：



SCSS代码：

.zoom-controls {
  position: absolute;
  top: 20px;
  right: 15px;
  height: 100%;
  @include box-sizing(border-box);
  @include flexbox(column, center);

  button {
    @include flex(0);
    -webkit-appearance: none;
    font-family: Arial, sans-serif;
    border: none;
    height: 40px;
    width: 40px;
    line-height: 0px;
    background-color: rgba(#000, 0.5);
    color: #FFF;
    margin-bottom: 20px;
    font-size: 36px;
    outline: 0;
    border-radius: 50%;
    text-align: center;
    @include box-sizing(border-box);

    .up {
      line-height: 10px;
    }
  }
}

flexbox和flex自定义混合：

@mixin flex($grow, $shrink: 1, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}


@mixin flexbox($direction, $justify, $wrap: nowrap)
{
  @include display-flex();
  @include flex-flow($direction, $wrap);
  @include justify-content($justify);
}

最后是这些控件的HTML：

<div class="zoom-controls">
  <button class="up" hm-tap="add()">+</button>
  <button class="down" hm-tap="subtract()">-</button>
</div>

尽管我还不知道是什么原因引起的，但肯定看起来确实存在一些宽度问题。

最佳答案

你需要改变这个

@mixin flex($grow, $shrink: 1, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

进入这个

@mixin flex($grow, $shrink, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

我认为这是造成问题的原因

$shrink: 1