1

iPhone/iPad で <button> 要素を正しくレンダリングするのに問題があります。

サンプルは次のとおりです。

<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

いくつかの作業を行った後、これをボタン スタイルに追加すると、iOS モバイル デバイスでのボタンのレンダリングが向上することがわかりましたが、ボタンのデフォルトの丸いスタイルが少し失われます。

-webkit-appearance: none;
于 2012-09-17T12:42:10.697 に答える
1

Ok。これには多くの試行錯誤が必要でしたが、実際に機能するようになりました。重要なのは、「height:100%;」を追加することです。スタイル文字列で。高さを出すとボタンが横に伸びません。高さを追加すると、テキストがワードラップを引き起こすのに十分な長さの場合、ボタンが大きくなります。高さを指定しないとモバイルサファリが混乱してしまうと思います。図に行きます。私はブラウザ コードを書くのが嫌いです。このようながらくたのためにどれだけのプログラミング時間が浪費されているかを考えるとうんざりします.

于 2010-08-13T02:31:37.783 に答える
-1

私自身のテストから正しく思い出すと、iPad はボタン要素のブレークをまったく処理しません。それを回避する方法があるかどうかはわかりません。

たとえば、これは機能しません

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