HTML按钮标签在iPhone/iPad上不能自动换行

Question

我在获取元素在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的限制吗？

Answer 1

好的。这花了很多试验和错误，但我真的让它工作了。关键是在样式字符串中添加"height:100%;“。去掉高度，按钮不会水平增长。如果文本足够长，可以自动换行，增加高度，按钮就会变大。如果没有指定高度，移动safari就会被搞糊涂。去想一想。我讨厌写浏览器代码。想想有多少编程时间被浪费在这样的废话上是令人恶心的。

Answer 2

在做了一些工作之后，我发现将此代码添加到按钮样式中可以使按钮在iOS移动设备上呈现得更好，但您会丢失按钮的默认圆形样式：

-webkit-appearance: none;

Answer 3

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

所以只需要在你的css中添加这个。

background-color: #dedede;