Html Twitter引导出现文本输入呈现问题_Html_Css_Twitter Bootstrap

Html Twitter引导出现文本输入呈现问题

html css twitter-bootstrap

Html Twitter引导出现文本输入呈现问题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试着用Twitter的引导程序快速浏览几页。我在让文本字段像以前那样渲染时遇到问题我的HTML看起来像 <div class="clearfix"> <label for="unit">unit</label> <div class="input"> <input class="xlarge" id="unit" name="unit" type="text" value="" /> </

我试着用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浏览器

当文档最外层缺少

标记时，会出现这种行为。在对我的模板进行整理之后，它看起来应该是这样的。谢谢记事本++

当doctype键入错误时，也会触发此行为。在我的例子中，

（错误）被修复为

，问题消失了。

需要HTML5 doctype Bootstrap使用需要使用HTML5 doctype的HTML元素和CSS属性。确保在项目中每个引导页面的开头都包含它

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

...

我也有同样的问题，但在我的例子中，这是由于文件之间的文本编码不一致造成的。一些文件在未包含BOM（字节顺序标记）的情况下以UTF-8编码，而其他文件在包含BOM的情况下以UTF-8编码。我将所有文件切换到没有BOM表的UTF-8，它工作正常。

我的文件是在Windows中创建的，我遇到了类似的问题，即高度太小，因此下降部分被截断。我的文件的第一行是一些PHP，后面是所需的html。看完所有的评论后，我移动了我的位置（2行）到PHP前面的顶部，高度增加。。。所以问题解决了。似乎DOCTYPE必须在任何PHP之前就已经开始了

将

class=“x-large”

替换为：

class=“输入块级别”

在我的情况下：
-我已将输入文本设置为一个表单
-它在Firefox中工作，在Chrome中不工作

我通过覆盖引导css中的行高度修复了这个问题。首先是这样的：

line-height: inherit;

当我在css中更改它时（因此它会覆盖引导css）：

成功了

如果有人看到这一点，但不知道我在说什么，请按f12并转到您的文本框。
现在，在“样式”选项卡中，您将看到：

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

这就是您要覆盖的内容。

感谢所有帮助我的人。
我也面临这个问题，以帮助其他用户分享我的旅程，我如何解决它。问题是这样的：

这个问题来自Firefox，它在chrome中看起来很正常

我如何找到解决方案：

我知道你认为这是css优化的问题。或者它背后没有合适的CSS
我使用的是bootstrap，第二个想法是输入框并没有合适的类位置
当我谈到这个问题并开始阅读答案时，他们建议我不相信
的问题，但我开始看那一页
我还检查了Firefox中的View Source，但存在
突然，我看到firebug html，这里真的没有DOCTYPE，而在所有其他页面中它都出现了

现在我想这是为什么，背后的原因。
然后我查看jsp页面。这就是我的问题所在，有人在正文之前包含另一个jsp页面

希望此突出显示有帮助。
还请记住（我碰巧遇到过），DOCTYPE应该作为页面的第一件事输出。我有在DOCTYPE之前编写的调试信息，它产生了与您在问题中描述的相同的效果。
DOCTYPE
必须是生成的HTML中的第一行。但这并不意味着在任何PHP之前都必须使用is。您只需要确保PHP不会生成任何输出（包括空行甚至空格字符）。您甚至可以使用PHP生成
DOCTYPE
。
input, button, select, textarea { font-family: inherit; font-size: inherit; font-height: inherit; }