Twitter Bootstrap的文本输入呈现问题
[英]Text input rendering issue with Twitter Bootstrap
问题描述
I'm trying to use Twitter's bootstrap for a quick few pages. 
我正在尝试使用Twitter的bootstrap快速几页。 I'm having problems getting text fields to render like they do at http://twitter.github.com/bootstrap/ 我在获取文本字段时遇到问题，就像在http://twitter.github.com/bootstrap/上一样
My HTML looks like 我的HTML看起来像
<div class="clearfix">
<label for="unit">unit</label>
<div class="input">
<input class="xlarge" id="unit" name="unit" type="text" value="" />
</div>
</div>
Which seems to be all of the relevant CSS classes that I see on the demo page. 这似乎是我在演示页面上看到的所有相关CSS类。 However, my text input fields render with the input area too small vertically, so the cursor and text overlap with the bottom border of the input area. 但是，我的文本输入字段在输入区域垂直方向上渲染太小，因此光标和文本与输入区域的底部边框重叠。 This is with latest chrome on win7. 这是win7上最新的chrome。
8 个解决方案
解决方案1
58 已采纳 2011-09-08 11:21:37
This behavior is also triggered when the doctype is wrongly typed. 当错误地键入doctype时，也会触发此行为。 In my case, <!DOCTYPE> (wrong) was fixed to <!DOCTYPE HTML> and the problem went away. 就我而言， <!DOCTYPE> （错误）被修复为<!DOCTYPE HTML> ，问题就消失了。
解决方案2
9 2012-03-21 20:16:29
http://twitter.github.com/bootstrap/scaffolding.html http://twitter.github.com/bootstrap/scaffolding.html
Requires HTML5 doctype Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. 需要HTML5 doctype Bootstrap使用需要使用HTML5 doctype的HTML元素和CSS属性。 Be sure to include it at the beginning of every Bootstrapped page in your project. 请务必将其包含在项目中每个Bootstrapped页面的开头。
<!DOCTYPE html>
<html lang="en">
...
</html>
解决方案3
5 2011-08-25 20:27:06
This behavior is seen when the document lacks <html> tags at the outermost level. 当文档在最外层缺少<html>标记时，会出现此行为。 After putting my template through a tidying process, it looks like it should. 在我的模板完成整理过程后，看起来应该是这样。 Thanks notepad++. 谢谢记事本++。
解决方案4
2 2012-05-20 18:57:03
I had the same problem, but in my case it was caused by having an inconsistent text encoding across files. 我有同样的问题，但在我的情况下，这是由于文件之间的文本编码不一致造成的。 Some files were encoded in UTF-8 without BOM (byte order mark), while other files were encoded in UTF-8 with BOM included. 一些文件以UTF-8编码而没有BOM（字节顺序标记），而其他文件以UTF-8编码，包括BOM。 I switched all files to UTF-8 without BOM and it worked correctly. 我将所有文件切换为UTF-8而没有BOM，它工作正常。
解决方案5
0 2013-09-09 14:43:00
将class="x-large"替换为： class="input-block-level"
解决方案6
0 2014-04-03 12:56:28
In my case: 就我而言：
- I had the input text in a form - 我在表单中输入了文本
- It did work in Firefox and did not work in Chrome - 它在Firefox中有效，但在Chrome中无效
I fixed this by overriding the line-height in the bootstrap css. 我通过覆盖bootstrap css中的行高来修复此问题。 First it was like this: 首先是这样的：
line-height: inherit;
and when I changed it in my css(so it overrides the bootstrap css): 当我在我的css中更改它时（所以它覆盖了bootstrap css）：
line-height: normal;
It worked! 有效！
For people who see this and don't know what I'm talking about, press f12 and go to your textbox. 对于看到这个并且不知道我在说什么的人，请按f12并转到您的文本框。
Now in the styles tab u will see: 现在在样式选项卡中，您将看到：
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
font-height: inherit;
}
that is the one that you want to override. 那是你要覆盖的那个。
解决方案7
0 2014-07-23 06:24:21
Thanks to all, that help me. 谢谢大家，这对我很有帮助。
I also face this problem, to help the other user I share my journey how I solve it. 我也面临这个问题，帮助其他用户分享我的旅程如何解决它。 The problem look like this : 问题看起来像这样：
This problem comes in Firefox its look proper in chrome. 这个问题在Firefox中看起来很合适。
How I found solution: 我如何找到解决方案：
- I know you are think that this is the problem with css optimize. 我知道你认为这是css优化的问题。 Or there is not proper CSS behind it. 或者它背后没有合适的CSS。
- I'm using bootstrap then second thought comes in mind is that there is not proper class place to input box. 我正在使用bootstrap，然后第二个想法是，没有适当的类位置输入框。
- When I come to this question and started reading of answer they suggested that the problem with
<!DOCTYPE html>I don't believe, but I started look that page.当我来到这个问题并开始阅读答案时，他们提出<!DOCTYPE html>我不相信，但我开始看那页。 - I also check with View Source in Firefox but there is present that
<!DOCTYPE html>我也查看了Firefox中的View Source，但是存在<!DOCTYPE html> - Suddenly I look at the firebug html and there is really no DOCTYPE here comes while in all other pages it is coming. 突然间，我看到了firebug html，并且在其他所有页面中都没有DOCTYPE 。
Now I think why this happened, reason behind it. 现在我想为什么会发生这种情况，背后的原因。
Then I look at the jsp pages. 然后我看看jsp页面。 This is the problem in my case, someone include the other jsp page before the body. 这是我的问题，有人在正文之前包含了另一个jsp页面。
Hope this highlight help. 希望这个突出的帮助。
解决方案8
-1 2013-05-19 07:06:00
My file has been created within Windows and I had a similar problem, ie the height was too small so descenders were truncated. 我的文件是在Windows中创建的，我遇到了类似的问题，即高度太小，因此下降器被截断。 My file has some PHP as the first lines followed by the required html. 我的文件有一些PHP作为第一行后跟所需的html。 After reading all the comments, I moved my (2 lines) to the top ahead of the PHP and the height increased ... so problem resolved. 阅读完所有评论之后，我将我的（2行）移到了PHP之前的顶部并且高度增加了......所以问题解决了。 It appears that DOCTYPE must be at the start even before any PHP. 似乎DOCTYPE必须在任何PHP之前就开始了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.