Twitter上的文本輸入呈現問題引導

我正嘗試使用Twitter的引導快速瀏覽幾頁。我有越來越文本字段問題呈現像他們在http://twitter.github.com/bootstrap/Twitter上的文本輸入呈現問題引導

我的HTML做看起來像

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

這似乎是所有相關的CSS類，我演示頁面上看到的。但是，我的文本輸入字段在輸入區域垂直方向呈現太小，所以光標和文本與輸入區域的下邊框重疊。這是在win7上最新的chrome。

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屬性。一定要將它包含在項目中每個Bootstrapped頁面的開頭。

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

來源

2012-03-21 20:16:29 Jason

我有同樣的問題，但在我的情況下，這是由跨文件有不一致的文本編碼引起的。有些文件使用UTF-8編碼，沒有BOM（字節順序標記），而其他文件使用UTF-8編碼幷包含BOM。我將所有文件都切換到沒有BOM的UTF-8，並且它工作正常。

來源

2012-05-20 18:57:03 npclaudiu

-1

我的文件已在Windows中創建，並且我遇到了類似的問題，即高度過小，因此下降部分被截斷。我的文件有一些PHP作爲所需html後面的第一行。閱讀完所有評論後，我將我的（2行）移到了PHP之前的頂部，並且高度增加了......所以問題得到了解決。看起來DOCTYPE必須在任何PHP之前開始。

來源

2013-05-19 07:06:00 user2398368

'DOCTYPE'必須是生成的HTML中的第一行。但這並不意味着必須在任何PHP之前。您只需確保PHP不會生成任何輸出（包括空行或空格字符）。你甚至可以使用PHP生成'DOCTYPE'。 –

更換class="x-large"到：class="input-block-level"

來源

2013-09-09 14:43:00 iconte

在我的情況：
- 我曾在一個形式
輸入文本 - 它沒有工作在Firefox和Chrome瀏覽器

沒有工作

我的解決了這個問題覆蓋bootstrap css中的行高。首先，它是這樣的：

line-height: inherit;

，當我在我的CSS改變它（所以它覆蓋引導CSS）：

line-height: normal;

它的工作！

對於看到此內容並且不知道我在說什麼的人，請按f12並轉到您的文本框。
現在在樣式選項卡U將看到：

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

就是要覆蓋一個。

來源

2014-04-03 12:56:28 MCollard

謝謝大家，那幫助我。
我也面臨這個問題，幫助其他用戶分享我的旅程，我是如何解決它的。問題是這樣的： enter image description here

這個問題出現在Firefox的它看起來很合適鉻。

我如何找到解決方案：

我知道你認爲這是用CSS優化的問題。或者它背後沒有合適的CSS。
我正在使用bootstrap，然後想到的第二個想法是，沒有適當的類地方輸入框。
當我來到這個問題，並開始閱讀答案他們建議，<!DOCTYPE html>問題我不相信，但我開始看那頁。
我也請與查看源代碼的Firefox，但目前存在着<!DOCTYPE html>
我突然看螢火蟲的HTML和真的沒有DOCTYPE，而在所有其他網頁它是未來這裏來。

現在我想爲什麼發生這種情況，背後的原因。
然後我看看jsp頁面。這是我的情況，有人在正文之前包含其他jsp頁面。

希望這突出的幫助。

來源

2014-07-23 06:24:21

Twitter上的文本輸入呈現問題引導

回答

相關問題