0

私は、自分が抱えているプラ​​ットフォームの制約に関連して特定の何かを達成しようとしています。

http://jsfiddle.net/MrV5M/4/で、問題のわかりやすいjsfiddleを作成しました。

特定の問題：

  • Chromeでは、入力ボックスの右の境界線が切り取られています。
  • Safariでは、コンテンツクラスのセルの幅がコンテナを超えているため、境界を越えてこぼれます。
  • IE9では、ラベルはコンテンツdivの左側に表示されません

私がSafariに関心を持っている主な理由は、WebアプリでもあるJQuery Mobile/PhoneGapアプリに取り組んでいるためです。私は最新のブラウザのみをサポートしていますが、これは私を苛立たせています。通常、コンテナにはテーブルを使用しますが、テキストオーバーフロー：コンテンツdivの省略記号スタイルは、テーブル内では機能しません。（基本的に、コンテンツを1行に保持し、固定幅を適用したり、Javascriptで幅を計算したりせずに省略記号を使用しようとしています）

これを機能させるためのl33tCSSスキルを持っている人はいますか？私は確かにしないでください...:)

4

3 に答える 3

1

このCSSをスタイルシートに追加するだけで、問題について安心できます：D

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
于 2014-07-31T07:49:01.890 に答える
0

あなたはこの答えが気に入らないかもしれません。ChromeとIE9の問題を修正するcssでいくつかの調整を行いました。見てください、

http://jsfiddle.net/MrV5M/11/

于 2012-10-07T05:32:29.877 に答える
-1

やろうとしていることを実行する方法はたくさんありますが、ほとんどサポートされていない「flex」のものを使用することを主張する場合（メジャーでもここを参照）、ベンダープレフィックスをに追加する必要がありますflex。

例：-webkit-flex、-moz-flex

また、flexプロパティを持つ要素に幅を設定する必要はないと思います。ただし、正ではありません。

したがって、ブラウザの問題は次のとおりです。

-IEはフレックスをまったくサポートしていないため、フロートを使用しない限り、ラベルはフロートしません。

-入力/コンテンツがコンテナに溢れ、切り取られる理由は、実際にはフレックスとは関係ありません。しかし、cssの動作方法..要素を100％の幅に設定することは、その要素をその親の幅に設定することを意味します。ただし、デフォルトでは、cssはパディング/ボーダー幅をその幅の一部としてカウントしません。したがって、100％の幅に加えて、L/Rのパディングと境界線を取得することになります。しかし、あなたは最新のブラウザしかサポートしていないので..box-sizing:border-box;救助のために。詳細についてはグーグルで検索してください。ただし、入力要素に配置するとうまくいくはずです。

于 2012-10-07T04:54:55.087 に答える