1

我无法让 <button> 元素在 iPhone/iPad 上正确呈现。

这是示例：

<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>;

这个想法是有一个固定宽度的按钮，文本根据需要换行。在最新的 IE、FF 甚至桌面 Safari（Mac 和 PC）中，一切都按预期工作。按钮宽度固定，文本换行，按钮高度自动增加以显示换行。

在 iPhone/iPad 上，文本换行，但按钮高度没有增加。因此，用户无法看到所有文本。

有没有人知道如何像在桌面浏览器上一样在 iPhone/iPad 上进行这项工作，或者这是移动 Safari 的限制？

4

4 回答 4

1

行。这需要大量的试验和错误，但我实际上得到了它的工作。关键是要加上“height:100%;” 在样式字符串中。取出高度，按钮不会水平增长。如果文本足够长以引起自动换行，则添加高度并且按钮确实会增长。猜测没有指定高度的移动 safari 会感到困惑。去搞清楚。我讨厌编写浏览器代码。想想有多少编程时间浪费在这样的废话上，真是令人作呕。

于 2010-08-13T02:31:37.783 回答
1

在做了一些工作之后，我发现将它添加到按钮样式可以让按钮在 iOS 移动设备上更好地呈现，但是你会丢失一些按钮的默认圆形样式：

-webkit-appearance: none;
于 2012-09-17T12:42:10.697 回答
1

你可以给背景颜色：#dedede。因为IOS不支持“buttonface”颜色。

因此，只需将其添加到您的 CSS 中。

background-color: #dedede;
于 2018-08-21T10:19:44.630 回答
-1

如果我从我自己的测试中没记错的话，iPad 根本不会处理按钮元素上的中断。不知道有没有办法解决它。

例如，这行不通

<button>First<br/>
  Second<br/>
  Third<br/>
  Fourth<br/>
</button>
于 2010-08-12T02:53:00.203 回答