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上的文本输入呈现问题引导

回答

相关问题