Twitter Bootstrap 文本字段的高度太小？答案

【问题标题】：Twitter Bootstrap text field's height too small?Twitter Bootstrap 文本字段的高度太小？
【发布时间】：2012-03-02 15:09:08
【问题描述】：

我正在使用引导程序，我发现文本字段的高度太小。好像不到 10 像素。我想知道它是否太小或者我犯了一些错误。

我用firebug检查了文本区域。它说高度是18px，这对我来说似乎是不可能的......而且我得到的和我从这里得到的一样。Text area from bootstrap example。这让我很困惑。 .. 我得到的是

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;
}

高度说是 18 像素，但不是... 有人可以帮忙吗？！

【问题讨论】：

好的。我发现this 有所帮助。但如果有人能向我解释这一点，我会很高兴。css 属性完全相同但结果却如此不同似乎很奇怪...... !DOCTYPE 部分与 css 有什么关系？！
DOCTYPE 决定了浏览器在渲染页面时的宽松程度。查看quirksmode.org/css/quirksmode.html 获取一些示例。
我读到了，但如果我不设置 DOCTYPE :P...confused still...，我不知道哪个部分会出错
@SomeshMukherjee 不，它没有用......
那么高度是多少？

标签： css twitter-bootstrap

【解决方案1】：

如果最佳答案没有帮助

我已经有了<!DOCTYPE html>，这对我来说不是问题。我不知道是什么问题，但是我在我的 css 中修复了它：

input[type=text], input[type=password], input[type=email], input[type=tel] {
    height: 28px !important;
}

这是一种解决方法，我不确定它是否有一些副作用。

【讨论】：

【解决方案2】：

我不知道为什么如果我打开一个干净的新 HTML5 页面它可以工作，但是在我添加一些代码后我不知道为什么会发生这种情况。所以我只是打开 bootstrap.min.css 文件并搜索：type="text" 并且有 height 属性，我将其更改为 min-height 因为它必须工作。

【讨论】：

【解决方案3】：

在这里查看我的解决方案in a similar thread。

基本上，文本文件编码给我带来了麻烦。它表现在浏览器之间如此细微的差异上，以至于我浪费了好几个小时来摆弄 CSS，认为这就是原因。

【讨论】：

你是对的，与 CSS 无关。我的一个 php 文件用 utf8 而不是 ascii 编码时，我遇到了同样的问题。

【解决方案4】：

添加<!DOCTYPE HTML> 应该可以解决这个问题。在这里问了同样的问题：Text input rendering issue with Twitter Bootstrap

【讨论】：

是的。我也发现了一个类似的问题。我在上面的评论区发布了它。我应该结束这个问题。但我不明白为什么它解决了这个问题。
非常感谢。这是一个真正的痛苦。
帮我修好了！但为什么？ :)
我只花了 2 多个小时来修复这个问题，因为图标与文本字段不匹配。不小心删除了文档类型。 +1...谢谢！！
我的文档中有，但这并不能解决问题：\

【解决方案5】：

是的，height 的总数是 28px，因为填充和边框也将 height 添加到 input，如下所示：

height 18px + 
4px padding-top + 
4px padding-bottom + 
1px border-top + 
1px border-bottom = 
Total 28px height

【讨论】：