为什么flex会影响字体大小在iOS上？ [英] Why is flex affecting font size on iOS?

问题描述

在Safari iOS上使用flexbox时确认字体大小受到某种影响后，我感到非常震惊。

I'm pretty shocked after confirming that font size is affected somehow while using flexbox on Safari iOS

iOS
< a href =https://i.stack.imgur.com/q9VNw.png =nofollow noreferrer>

桌面

代码

a {
    font-size: 14px;
}

a + a {
    margin-left: 1em;
}

.flex {
    display: flex;
}

.float > a {
    float: left;
}

.float:after {
    content: "";
    display: block;
    clear: both;
}

<div>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="flex">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="float">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

我在这里缺少什么？这是一个错误？

What am I missing here?, is this a bug?

推荐答案

font-size会同时显示flex和float：

So, the issue with the font-size appears for both, flex and float:

http：// stackoverflow.com/a/22417120/94144

添加此项修正：

a {
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;
}

这篇关于为什么flex会影响字体大小在iOS上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！