Twitterのブートストラップでのテキスト入力のレンダリングの問題

私は、Twitterのブートストラップをすばやく使用しようとしています。私は、彼らがhttp://twitter.github.com/bootstrap/Twitterのブートストラップでのテキスト入力のレンダリングの問題

マイHTMLで行うようにテキストフィールドを取得問題をレンダリングするために抱えていることは、私はデモページでご覧関連するCSSクラスのすべてをあるように思わ

<div class="clearfix"> 
    <label for="unit">unit</label> 
    <div class="input"> 
     <input class="xlarge" id="unit" name="unit" type="text" value="" /> 
    </div> 
</div>

のように見えます。しかし、私のテキスト入力フィールドは、入力領域が垂直方向には小さすぎるので、カーソルとテキストは入力領域の下端と重なるようにレンダリングされます。これはwin7上の最新のクロムです。

enter image description here

出典

2011-08-25 totowtwo

この動作は、doctypeが間違って入力された場合にも発生します。私の場合、<!DOCTYPE>（間違っている）は<!DOCTYPE HTML>に修正され、問題は解決されました。

出典

2011-09-08 11:21:37

また、DOCTYPEをページの最初のものとして出力する必要があることに注意してください（私には起こりました）。私はDOCTYPEの前に書かれたデバッグ情報を持っており、あなたの質問に記述したのと同じ効果が得られました。 – patrick

文書は、最も外側のレベルで<html>タグが欠けているとき、この動作が見られます。テンプレートをきちんと整理した後、それは必要なように見えます。ありがとうメモ帳++。

出典

2011-08-25 20:27:06 totowtwo

http://twitter.github.com/bootstrap/scaffolding.html

HTML5のDOCTYPE ブートストラップは、HTML要素とHTML5のDOCTYPEを使用する必要がCSSプロパティを使用する必要があります。プロジェクトのブートストラップされたページの冒頭に必ずそれを含めてください。

<!DOCTYPE html> 
<html lang="en"> 
    ... 
</html>

出典

2012-03-21 20:16:29 Jason

私は同じ問題を抱えていたが、私の場合、それはファイル間で一貫性のないテキストエンコーディングを持つことによって引き起こされました。一部のファイルはBOM（バイトオーダーマーク）のないUTF-8でエンコードされ、他のファイルはBOMが含まれたUTF-8でエンコードされていました。すべてのファイルをBOMなしでUTF-8に切り替えたところ、正しく機能しました。

出典

2012-05-20 18:57:03 npclaudiu

-1

私のファイルはWindows内で作成されましたが、同様の問題がありました。つまり、高さが小さすぎて子孫が切り捨てられました。私のファイルには、最初の行に必要なhtmlが続くPHPがあります。すべてのコメントを読んだ後、私は（2行）をPHPの前に一番上に移動し、高さが上がったので問題は解決しました。 DOCTYPEは、PHPの前であっても最初でなければならないようです。私は
形式で入力テキストを持っていた - -
それはFirefoxで仕事をしたとChrome

に私がすることによってこれを固定

を動作しませんでした。私の場合はclass="input-block-level"

出典

2013-05-19 07:06:00 user2398368

'DOCTYPE'は結果のHTMLの最初の行でなければなりません。しかし、それはPHPの前にする必要はありません。 PHPが出力（空行や空白文字を含む）を生成しないようにするだけです。 PHPを使って 'DOCTYPE'を生成することさえできます。 –

にclass="x-large"置き換えますブートストラップCSSの行の高さをオーバーライドします。

line-height: inherit;

と私はCSSでそれを変更したとき（それは、ブートストラップCSSを上書きします）：まず、このようなものだった

line-height: normal;

それは働きました！

これを見て、私が何を話しているのか分からない場合は、f12を押してテキストボックスに移動してください。
は今のスタイル]タブにuが表示されます。あなたが上書きしたいものです

input, button, select, textarea { 
    font-family: inherit; 
    font-size: inherit; 
    font-height: inherit; 
}

を。

出典

2013-09-09 14:43:00 iconte

：

出典

2014-04-03 12:56:28 MCollard

ありがとうございました。
私はこの問題に直面し、他のユーザーが私の旅をどのように解決するのかを助けます。この問題は、次のようになります。 enter image description here

この問題は、Firefoxのクロムに適しています。私はあなたがこれはCSSの最適化に問題があると考えている知っている

：私は解決策を見つけた方法

。または、その背後に適切なCSSがありません。
私はブートストラップを使用していますが、二番目の考えは、入力ボックスに適切なクラスの場所がないということです。
私はこの質問に来て、答えを読むのを始めたとき、彼らは<!DOCTYPE html>の問題が私には信じられないと示唆しましたが、私はそのページを見て始めました。
また、私はFirefoxでソースの表示を確認したが<!DOCTYPE html>
が突然、私は放火犯のHTMLを見てと何のDOCTYPEは、他のすべてのページにそれが来ている間、ここに来て本当に存在しないことが存在します。

私はこれがなぜ起こったのか、それの背後にある理由と思う。
次に、jspページを見ていきます。私の場合、これは問題です。誰かが他のJSPページを本文の前に含めます。

このハイライトヘルプが必要です。

出典

2014-07-23 06:24:21

Twitterのブートストラップでのテキスト入力のレンダリングの問題

答えて

関連する問題