Question

似乎在Opera和Chrome中工作正常，但FF和IE11中的相同代码隐藏了文本，这根本不好玩。我没有Mac，所以我不知道它在Safari中是什么样的。

Here is a plunker demonstrating the issue.

我尝试添加line-height和overflow:visible，但似乎都没有太大作用。

的CSS：

#userResponse {
    font-size: 2em;
    padding: 1em 0.25em;
    text-align: center;
}

html：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <input class="form-control" id="userResponse" type="text">
  </body>

</html>

Answer 1

Bootstrap还有输入标签类，可以增加文本字段的高度，尝试使用input-lg，希望它符合您的要求

<input class="form-control input-lg" type="text">

请记住将所有form-control放入form-group

<div class="form-group">
    <input class="form-control input-lg" type="text">
</div>

了解更多http://getbootstrap.com/css/#forms-control-sizes

Answer 2

Luzan的解决方案可能是最好的方法。但是，为了保持间距与填充物中铬的出现方式相似，我给它新的固定高度58px并完全去除了填充物。这似乎在所有四个浏览器中提供了一致的结果。

Updated Plunker.

<强> HTML：

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>

  <div class="form-group">
    <input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
  </div>

</body>

</html>

<强>的CSS：

/ *样式到这里* /

#userResponse {
    font-size: 2em;
    padding: 1em 0.25em;
    text-align: center;
}

.custom {
  text-align:center;
  font-size:2em;
  height:58px;
}

带有自定义填充的文本输入上的Bootstrap 3表单控件类隐藏了IE和FF中的文本

2 个答案: