Twitter Bootstrap文本字段的高度是否太小？

69

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

我用萤火虫检查了文本区域。它说高度是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;
}

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

css twitter-bootstrap

— 尼朱赫兹
source

1

好的，我发现这很有帮助，但是如果有人能向我解释这一点我会很高兴.css属性完全相同但结果却如此不同似乎很奇怪...！DOCTYPE部分与css有什么关系？！

— Gnijuohz 2012年

DOCTYPE确定呈现页面时浏览器的宽容度。请查看quirksmode.org/css/quirksmode.html以获取一些示例。

— Rodney Folz'2

我读过，但我不知道如果我不设置DOCTYPE，哪一部分会出错：P ...仍然感到困惑...

— Gnijuohz 2012年

@SomeshMukherjee不，这

— 没用

那高度是多少？

— SoWhat 2012年

167

添加<!DOCTYPE HTML>应解决此问题。在这里提出了相同的问题：Twitter Bootstrap的文本输入呈现问题

— 迭戈·艾伦
source

是的，我也找到了类似的问题，我将其发布在上面的评论区域中，我本应该结束这个问题，但是我不知道为什么它可以解决问题。

— Gnijuohz 2012年

1

非常感谢。这真是痛苦。

— 理查德·克莱顿

5

为我修复它！但为什么？:)

— Lukas

我花了2个多小时来解决此问题，因为图标与文本字段不符。偶然删除了文档类型。+1 ...谢谢！

— HenryW 2013年

6

我的文档中有<！DOCTYPE HTML>，但这不能解决问题：\

— ryandawkins 2013年

7

万一最佳答案无济于事

我已经拥有<!DOCTYPE html>了，这对我来说不是问题。我不知道这是什么问题，但是我在CSS中通过以下方法解决了问题：

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

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

— 犹太人
source

3

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

— 塔米尔
source

2

是的，总计height是28px因为padding和border也添加height了input如下内容：

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

— Sandeep
source

2

在类似的线程中查看我的解决方案。

基本上，文本文件编码引起了我的所有麻烦。它在不同浏览器之间的微小差异中得以体现，以至于我浪费了很多时间来摆弄CSS的思想，这就是原因。

— 用户名
source

您与CSS无关。我有一个同样的问题，我的一个php文件是用utf8而不是ascii编码的。

— nakhli 2012