Question

我正在尝试使用Twitter的bootstrap快速几页。我在查询文本字段时遇到问题，就像在http://twitter.github.com/bootstrap/

那样进行渲染

我的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

Answer 1

当错误地键入doctype时，也会触发此行为。在我的情况下，<!DOCTYPE>（错误）已修复为<!DOCTYPE HTML>，问题就消失了。

Answer 2

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

需要HTML5 doctype Bootstrap使用需要使用HTML5 doctype的HTML元素和CSS属性。请务必将其包含在项目中每个Bootstrapped页面的开头。

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

Answer 3

当文档在最外层缺少<html>标记时，会出现此行为。在我的模板完成整理过程后，看起来应该是这样。谢谢记事本++。

Answer 4

我遇到了同样的问题，但在我的情况下，这是由于文件之间的文本编码不一致造成的。一些文件以UTF-8编码而没有BOM（字节顺序标记），而其他文件以UTF-8编码，包括BOM。我没有BOM就将所有文件切换为UTF-8，并且工作正常。

Answer 5

将class="x-large"替换为：class="input-block-level"

Answer 6

在我的情况下：
- 我有一个表格的输入文字
- 它在Firefox中运行，但在Chrome中无法运行

我通过覆盖bootstrap css中的行高来修复此问题。首先是这样的：

line-height: inherit;

当我在我的css中更改它时（所以它覆盖了bootstrap css）：

line-height: normal;

有效！

对于看到这个并且不知道我在说什么的人，请按f12并转到您的文本框。
现在在样式选项卡中，您将看到：

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

这是您要覆盖的那个。

Answer 7

感谢所有人，这对我有所帮助我也面临这个问题，帮助其他用户分享我的旅程如何解决它。问题看起来像这样： enter image description here

这个问题在Firefox中看起来很合适。

我是如何找到解决方案的：

我知道你认为这是css优化的问题。或者背后没有合适的CSS。
我正在使用bootstrap然后想到的第二个想法就是输入框没有合适的类位。
当我回答这个问题并开始阅读答案时，他们提出问题<!DOCTYPE html>我不相信，但我开始看那页。
我还查看了Firefox中的View Source，但是存在<!DOCTYPE html>
突然间我看看firebug html，并且在其他所有页面中都没有来自DOCTYPE 。

现在我想为什么会发生这种情况，背后的原因然后我看看jsp页面。这是我的问题，有人在正文之前包含了另一个jsp页面。

希望这能突出帮助。

Answer 8

我的文件是在Windows中创建的，我遇到了类似的问题，即高度太小，因此下划线被截断。我的文件有一些PHP作为第一行后跟所需的html。看完所有评论后，我动了我的话（2行）到PHP的前面和高度增加...所以问题解决了。似乎DOCTYPE必须在任何PHP之前就开始了。

Twitter Bootstrap的文本输入呈现问题

8 个答案: