CSS Twitter Bootstrap 文本字段的高度太小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9222851/
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
Twitter Bootstrap text field's height too small?
提问by Gnijuohz
I am using bootstrap and i find the height of the text field is too small.It's like less than 10px.I am wondering if it is small or i made some mistakes.
我正在使用引导程序，我发现文本字段的高度太小了。好像不到 10px。我想知道它是小还是我犯了一些错误。
I used firebug to inspect the text area.It says the height is 18px,which seems impossible for me...And what i got is the same as i got from here.Text area from bootstrap example.It makes me rather confused... what i got is
我用萤火虫检查文本区域。它说高度是18px，这对我来说似乎不可能......我得到的和我从这里得到的一样。引导程序示例中的文本区域。这让我很困惑......我得到的是
input, textarea, select, .uneditable-input {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #555555;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
margin-bottom: 9px;
padding: 4px;
}
The height says it's 18px, but it's not... Can somebody help?!
高度说它是 18px，但它不是......有人可以帮忙吗？！
回答by Diego Allen
Adding <!DOCTYPE HTML>should fix this. The same question was asked here: Text input rendering issue with Twitter Bootstrap
添加<!DOCTYPE HTML>应该可以解决这个问题。这里问了同样的问题：Text input rendering issue with Twitter Bootstrap
回答by Jeewes
Incase the top answer didn't help
柜面最佳答案没有帮助
I had <!DOCTYPE html>already and it wasn't the problem for me. I don't know what is the problem, but
I fixed it with this in my css:
我已经<!DOCTYPE html>有了，这对我来说不是问题。我不知道是什么问题，但我在我的 css 中修复了它：
input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 28px !important;
}
It's a workaround and I'm not sure if it has some side effects.
这是一种解决方法，我不确定它是否有一些副作用。
回答by Tamir
I don't know why if I open a clean new HTML5 page it works but after I add some code I don't know why it happens. So I just open the bootstrap.min.css file and search:type="text"and there there is height property and I change it to min-height for it have to be working.
我不知道为什么如果我打开一个干净的新 HTML5 页面它可以工作但是在我添加了一些代码之后我不知道为什么会发生这种情况。所以我只是打开 bootstrap.min.css 文件并搜索：type="text"并且有 height 属性，我将其更改为 min-height ，因为它必须工作。
回答by sandeep
Yes the total heightis 28pxbecause padding & border also add heightto that inputlike this:
是的总量height是28px因为边距和边框还加入height到input这样的：
height 18px +
4px padding-top +
4px padding-bottom +
1px border-top +
1px border-bottom =
Total 28px height
回答by user1481102
See my solution here in a similar thread.
在类似的线程中查看我的解决方案。
Basically, the text file encoding was causing all my trouble. It manifested in such minute differences across browsers that I wasted hours fiddling with CSS thinking that was the cause.
基本上，文本文件编码导致了我所有的麻烦。它体现在浏览器之间如此细微的差异中，我浪费了数小时摆弄 CSS，认为这是原因。
