2012-02-14 25 views
0

設定された高さとパディングを持つテキスト入力がありますが、パディングは有効ではありません。そしてそれはさらに奇妙になる。私はjsのフィドル(下にリンク)を作成し、それはうまく動作しますが、私はテストページを作成し、直接私のブラウザ(Macのクロム)でそれを開く場合は、パディングを無視します。私が考えることができるすべてを試してみました。なぜこのテキスト入力は私が設定したスタイルに従います

BTW。私は問題がクリアされているファイルにリンクしたhttp://jsfiddle.net/Jebg3/

UPDATE

MACためクロームでこれをテストしています。

http://levihoch.com/tests/input.html

UPDATE 2

@truthは、箱サイズプロパティを使うことを提案し、それは、しかし、それはIEのすべてのバージョンで壊れオペラで完璧に動作します。更新されたページは次のとおりです。 http://levihoch.com/tests/input.html?v=2

+0

あなたはCSSのリセットを試してみましたか? –

+0

http://jsfiddle.net/Jebg3/のパディングとフレームhttp://fiddle.jshell.net/Jebg3/show/のパディングを比較するとうまく見えます。または私は何かを逃していますか? –

+0

@MathiasBynens私は彼が自分のページでCSSリセットを使用しているかどうか尋ねていますが、jsFiddleがCSSリセットを使用していて、それが違いかもしれないことを知っています... –

答えて

1

は、ルールのリストに次のプロパティを追加します:Chromeでの原因となる、それに対して「ボーダー・ボックス」を適用するいくつかの理由

box-sizing: content-box; 

height: 13px;はコンテンツからではなく境界から計算されます。

Here's a great article on the subject, by Chris Coyer @ CSS-Tricks

+0

omgありがとう。これはクロムの問題ですか? –

+0

私は知らない、彼らは奇妙なことはjsFiddleで起こらないことですが、それはあなたのサイトで行います。たぶん誰か他の人が被写体に光を当てるかもしれない –

+0

私はIEでそれをテストし、それはすべてのバージョンで壊れます。非常に奇妙な、これまで私に起こったことはありません。 –

0

投稿したサンプルに基づいて、<style>タグは間違った場所にあります。文書の<head>タグに置く試してみてください...

+0

それは大したことではありませんが、私はそれにショットを与えました。しかし、ありがとう。 –

+0

妥当性確認のために、正しい場所にタグを配置することをお勧めします。 :)あなたはこれをソートしてもらいたいと思っています。 – FarligOpptreden

+0

@truthはそれを理解しました。 –

関連する問題