twitter-bootstrap Twitter Bootstrap 的文本输入渲染问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7196398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text input rendering issue with Twitter Bootstrap
提问by totowtwo
I'm trying to use Twitter's bootstrap for a quick few pages. I'm having problems getting text fields to render like they do at http://twitter.github.com/bootstrap/
我正在尝试使用 Twitter 的引导程序快速浏览几页。我在让文本字段像在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. 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.
这似乎是我在演示页面上看到的所有相关 CSS 类。但是，我的文本输入字段在垂直方向上呈现的输入区域太小，因此光标和文本与输入区域的底部边框重叠。这是win7上最新的chrome。
回答by Hanne Olsen
This behavior is also triggered when the doctype is wrongly typed. In my case, <!DOCTYPE>(wrong) was fixed to <!DOCTYPE HTML>and the problem went away.
当文档类型输入错误时也会触发此行为。在我的情况下，<!DOCTYPE>（错误）被修复<!DOCTYPE HTML>并且问题消失了。
回答by Jason
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. Be sure to include it at the beginning of every Bootstrapped page in your project.
需要 HTML5 文档类型 Bootstrap 使用需要使用 HTML5 文档类型的 HTML 元素和 CSS 属性。确保将其包含在项目中每个 Bootstrapped 页面的开头。
<!DOCTYPE html>
<html lang="en">
...
</html>
回答by totowtwo
This behavior is seen when the document lacks <html>tags at the outermost level. After putting my template through a tidying process, it looks like it should. Thanks notepad++.
当文档<html>在最外层缺少标签时会出现这种行为。在我的模板经过整理过程后，它看起来应该如此。感谢记事本++。
回答by npclaudiu
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. I switched all files to UTF-8 without BOM and it worked correctly.
我遇到了同样的问题，但在我的情况下，它是由跨文件的文本编码不一致引起的。一些文件以 UTF-8 编码，没有 BOM（字节顺序标记），而其他文件以包含 BOM 的 UTF-8 编码。我将所有文件切换到没有 BOM 的 UTF-8 并且它工作正常。
回答by iconte
replace class="x-large"to : class="input-block-level"
替换class="x-large"为：class="input-block-level"
回答by MCollard
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. First it was like this:
我通过覆盖引导程序 css 中的行高来解决这个问题。起初是这样的：
line-height: inherit;
and when I changed it in my css(so it overrides the bootstrap css):
当我在我的 css 中更改它时（因此它覆盖了引导程序 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.
Now in the styles tab u will see:
对于看到此内容但不知道我在说什么的人，请按 f12 并转到您的文本框。
现在在样式选项卡中，您将看到：
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
font-height: inherit;
}
that is the one that you want to override.
那就是您要覆盖的那个。
回答by Anshu Kumar
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 中，它在 chrome 中看起来很合适。
How I found solution:
我如何找到解决方案：
- I know you are think that this is the problem with css optimize. Or there is not proper CSS behind it.
- I'm using bootstrap then second thought comes in mind is that there is not proper class place to input box.
- 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. - I also check with View Source in Firefox but there is present that
<!DOCTYPE html> - Suddenly I look at the firebug html and there is really no DOCTYPEhere comes while in all other pages it is coming.
- 我知道您认为这是 css 优化的问题。或者它背后没有合适的 CSS。
- 我正在使用引导程序，然后我想到的第二个想法是输入框没有合适的类位置。
- 当我来到这个问题并开始阅读答案时，他们建议
<!DOCTYPE html>我不相信这个问题，但我开始查看该页面。 - 我还检查了 Firefox 中的查看源代码，但存在
<!DOCTYPE html> - 突然我看了看萤火虫的 html，这里真的没有 DOCTYPE出现，而在所有其他页面中它都出现了。
Now I think why this happened, reason behind it.
Then I look at the jsp pages. This is the problem in my case, someone include the other jsp page before the body.
现在我想为什么会发生这种情况，背后的原因。
然后我看看jsp页面。这就是我的问题，有人在正文之前包含另一个 jsp 页面。
Hope this highlight help.
希望这个亮点有帮助。
回答by user2398368
My file has been created within Windows and I had a similar problem, i.e. the height was too small so descenders were truncated. My file has some PHP as the first lines followed by the required 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. It appears that DOCTYPE must be at the start even before any PHP.
我的文件是在 Windows 中创建的，我遇到了类似的问题，即高度太小，因此下降部分被截断。我的文件有一些 PHP 作为第一行，后跟所需的 html。阅读完所有评论后，我将我的（2 行）移到 PHP 前面的顶部，高度增加了......问题解决了。似乎 DOCTYPE 必须在任何 PHP 之前就开始。
