Question

在Windows / Mac / Android或任何操作系统中查看我的网站时，我的网站会按照我的意愿显示。但在iOS（在iPhone，iPod Touch，iPad等）上，它使按钮内的文字看起来很奇怪。

！[] [1]

在这里，您可以看到iPad上出现问题。带“男性”的按钮显示正确，但“女性”按钮显示错误。（女性性别标志位于顶部）

以下是两个按钮的代码：

<button class="choose">&#9794; Male</button>
<button class="choose">&#9792; Female</button>

CSS代码：

// body code for the whole document:
body{
    font-size:14px;
    font-family:"Lucida Grande", "Lucida Sans Unicode" Tahoma, Verdana, Arial, sans-serif;
    -webkit-font-smoothing:subpixel-antialiased;
    text-align:center;
    margin:0px;
    padding:0px;
}

// code just for the two buttons:
    .choose{
        font-size:15px;
        height:40px;
        width:100px;
    }

有谁知道如何解决这个问题？

Answer 1

将按钮样式更改为.choose{ font-size:15px; height:40px; width:120px; }。你没有给“女性”这个词给出足够的空间来与符号放在同一条线上，所以它会下降以试图装入按钮而不会跑掉。增加按钮的宽度应该可以解决这个问题。

如果情况并非如此，我就输了。它在您的网站上运行正常，但可能是因为更改iOS的字体会导致问题 - 它可能会稍微大一点，因此不合适。

Answer 2

您是否尝试过使用不间断的空间？

<button class="choose">&#9794;&nbsp;Male</button>

iOS中按钮内部的奇怪文本样式

2 个答案: