html - 带有自定义填充的文本输入的 Bootstrap 3 表单控制类在 IE 和 FF 中隐藏文本

标签 html css twitter-bootstrap twitter-bootstrap-3

似乎在 Opera 和 Chrome 中运行良好,但在 FF 和 IE11 中相同的代码隐藏了文本,这一点都不好玩。我没有 Mac,所以我不知道 Safari 中的情况。

Here is a plunker demonstrating the issue.

我试过添加 line-heightoverflow: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>

最佳答案

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

关于html - 带有自定义填充的文本输入的 Bootstrap 3 表单控制类在 IE 和 FF 中隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27566118/

相关文章:

html - 对齐切换按钮并使其看起来像一个

javascript - CSS/AJAX - 在 AJAX 调用上激活样式

javascript - 为什么 document.getElementById 不能只被 Firefox 识别

javascript - 如何使用 Angular JS 设置 Bootstrap 导航栏事件类?

javascript - 用父链接标题的 "href"包裹文章中的每个图像

javascript - 根据IP地址加载某些页面元素

css - div 的高度适合容器 div 的高度自动滚动

php - 错误 : mysql_fetch_array() expects parameter 1 to be resource, 中给出的 bool 值

javascript - 如何避免后台页面滚动?

html - Bootstrap 响应式图像轮播大小调整