android - Span 的样式在 Android 手机上不水平对齐

Question

我在一个网站上工作过 http://ineland.se当我的客户在她的手机 (Samsung Galaxy S6) 上查看它时，她通过移动导航按钮(三个水平条)遇到了这个问题:

现在奇怪的是我找不到在其他任何地方复制的这个问题。我无法访问 Samsung Galaxy S6(我只是一个小型企业开发人员)并且当我使用 http://browserling.com 时检查问题，看起来很正常。

这是图标的 HTML:

<span id="header-burger" class="burger-nav btn">
        <span class="burger-nav-symbol open-burger">
            <span class="dash">&mdash;</span>
            <span class="dash to-cross">
                    <span class="plain">&mdash;</span>
                    <span class="cross x1">&mdash;</span>
                    <span class="cross x2">&mdash;</span>
            </span>
            <span class="dash">&mdash;</span>
        </span>
    </span>

符号的CSS(sass):

.burger-nav-symbol {
            position: relative;
            width: auto;
            height: auto;
            padding: 2px;
            display: inline-block;
            margin: 0 auto;
            * {
                clear: both;
            }

            .dash {
                display: block;
                float: left;
                color: $dark_A;
                overflow: visible;
                @include transition ($trans_all, $trans_time, $transease, $trans_delay);

                &.to-cross {
                    position: relative;
                    z-index: 14000;

                    .cross {
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 1;
                        @include transition ($trans_all, $trans_time, $transease, $trans_delay);

                        &.x1 {
                        opacity: 0;
                            }
                        &.x2 {
                            opacity: 1;

                        }
                    }
                }
            }
        }

Answer 1

我尝试在 chrome 中调试您的网站(通过缩小视口(viewport))，它看起来像这样

当我使用检查器模式时，我看到了这段代码:

在我删除那个奇怪的方 block 后，它看起来很好。

这不是答案，但也许您应该尝试找出如何摆脱那个方 block 。