1

在 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;
    }

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

4

2 回答 2

1

将按钮样式更改为.choose{ font-size:15px; height:40px; width:120px; }. 您没有为“女性”一词提供足够的空间以与符号位于同一行，因此它会下降以尝试适合按钮而不会流失。增加按钮的宽度应该可以解决这个问题。

如果不是这样，我就迷路了。它在您的网站上运行良好，但可能是更改 iOS 的字体会导致问题——它可能会稍大一些，因此不合适。

于 2012-07-07T19:43:58.330 回答
1

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

<button class="choose">&#9794;&nbsp;Male</button>
于 2012-07-07T20:07:55.610 回答