输入文本字段在 Internet Explorer 10 中不起作用答案

【问题标题】：Input text field not working in Internet explorer 10输入文本字段在 Internet Explorer 10 中不起作用
【发布时间】：2018-03-03 14:37:11
【问题描述】：

在这个简单的网站 (www.enverter.com) 上，input type="text" 在 Internet Explorer 10 中不起作用。但是，它在 Chrome 和 Safari 中运行良好。

我的意思是：“文本”输入类型（带有一些自定义样式）的引导表单控件不在 Internet Explorer 10 和 FireFox 中显示文本，但在 Chrome、Safari 和 Edge 中按预期显示。

我不确定这是引导问题还是我遗漏的其他问题。我确实在 head 部分的开头设置了以下元标记，并且我使用的是 bootstrap 3.3.4 版本。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

我在控制台中没有看到任何错误。

这里是 JSFiddle：https://jsfiddle.net/pjdixit/kfev4rss/

谁有解决方法的指点？

完整的代码贴在下面

<!DOCTYPE html>

<html>
    <head>
        <title> Bootstrap Form Control Not working in Internet Explorer and Safari</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <style>

        .CustomInputStyle
        {
            text-align: center;
            margin-top: 20px;
            padding: 25px;
            font-size:24px;
            font-weight:bold;
        }

    </style>


    </head>


    <body>
        <div>
            <h1 class="text-center">
                Bootstrap Form Control (with some custom styling) rendering error in Internet Explorer and Safari
            </h1>
            <h3 class="text-center">
                Test to find out why Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 and Safari but displays as expected in Chrome, Edge and Safari.
            </h3>


        </div>

        <div class="container-fluid"> 

            <div class="row">
                 <div class="col-md-8 col-md-offset-2">

                    <div class="form-group">

                        <div class="row">
                            <div class="col-md-12">
                                <h3 style="color:red"> Test: </h3>
                                <br>
                            </div>
                        </div> 

                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control CustomInputStyle" value="Test input 1">                                
                            </div>

                            <div class="col-md-6">
                                <input type="text" class="form-control CustomInputStyle" value="Test input 2">                                 
                            </div>
                        </div>

                    </div>

                 </div>
            </div>
        </div>



    </body>
</html>

【问题讨论】：

你能摆弄一下吗？
它在 Firefox 中也不起作用（意思是，输入字段不显示您输入的内容）。你能提供你的代码吗？
发帖时我无法访问开发计算机。明天我会做更多的测试，并尝试缩小问题范围并将其发布在 JSFidde 上。谢谢@
太棒了 - 还有……您可能想详细说明不工作。这是没有意义的，并且迫使我们做额外的工作来弄清楚到底是什么不工作，以及错误是什么。
@PeterAbolins：我的意思是“文本”输入类型（带有一些自定义样式）的引导表单控件不在 Internet Explorer 10 中显示文本，但在 Chrome、Safari 和边缘。

标签： javascript html twitter-bootstrap-3 internet-explorer-10

【解决方案1】：

另一个答案，因为我需要知道原因。 Firefox 使用不同的盒子大小模型。 Form padding differences in Firefox and Opera/Chrome/IE

在不添加引导类input-lg 的情况下，您可以通过在输入样式上设置高度并相应地调整填充(height - (padding-top + padding-bottom) = height available for your text) 来解决您的问题（在Firefox 中）。或者，您可以将box-sizing 元素添加到css，值为content-box：

.CustomInputStyle {
    text-align: center;
    margin-top: 20px;
    height: 75px; /* This makes the available font height = 25px */
    padding: 25px;
    font-size: 24px;
    font-weight: bold;        
    box-sizing: content-box; 
    /* Firefox default = border-box, Other browsers = content-box */
}

我猜 IE 10 有一个稍微不同的问题，可以通过缩小内边距（或删除内边距）并在样式上设置显式高度来解决。

【讨论】：

感谢您在 Firefox 上调查问题的核心。

【解决方案2】：

好的，经过几次小的修改后，我能够使其在所有浏览器上按预期工作和呈现：

我添加了“input-lg”类并从我的 CustomInputStyle 类中删除了边距和填充

.CustomInputStyle {
  text-align: center;
  margin-top: 20px;
  padding: 25px;
  font-size: 24px;
  font-weight: bold;
}

.CustomInputStyle2 {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

这是演示这一点的小提琴：https://jsfiddle.net/pjdixit/kfev4rss/4/

测试输入 1 的文本（使用以前的样式）在 Internet Explorer 和 Firefox 中将不可见，也不会显示键入的文本，但测试输入 2（使用上述修改后的样式）应该可以在所有主要浏览器中使用。

【讨论】：