具有自定義填充的文本輸入上的Bootstrap 3表單控制類會在IE和FF中隱藏文本

Question

似乎在Opera和Chrome中可以正常工作，但是在FF和IE11中使用相同的代碼可以隱藏文本，這一點都不好玩。 我沒有Mac，所以我不知道Safari中的情況。

我嘗試添加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

盧贊的解決方案可能是最好的方法。 但是，為了使間距保持與填充中的chrome外觀相似，我給它設置了58px的新固定高度，並完全刪除了填充。 這似乎在所有四個瀏覽器上都能提供一致的結果。

更新了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 個解決方案

解決方案1
2 已采納 2014-12-19 12:57:21

解決方案2
0 2014-12-19 19:55:26

具有自定義填充的文本輸入上的Bootstrap 3表單控制類會在IE和FF中隱藏文本

問題描述

2 個解決方案

解決方案1 2 已采納 2014-12-19 12:57:21

解決方案2 0 2014-12-19 19:55:26

解決方案1
2 已采納 2014-12-19 12:57:21

解決方案2
0 2014-12-19 19:55:26