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

Question

在这个简单的网站 (www.enverter.com) 上，input type="text" 在 Internet explorer 10 中不工作。但是，它在 Chrome 和 Safari 中工作正常。

不工作我的意思是：Bootstrap "text" 输入类型的表单控件（具有一些自定义样式）在 Internet Explorer 10 和 FireFox 中不显示文本，但在 Chrome、Safari 和 Edge。

我不确定这是 bootstrap 问题还是我遗漏了什么。我确实在头部部分的开头设置了以下元标记，并且我使用的是 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>

Answer 1

好的，经过一些小的修改后，我能够让它在所有浏览器上正常工作和呈现：

我添加了 class "input-lg" 并从我的 CustomInputStyle class

中删除了边距和填充

.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;
}

这是证明这一点的 fiddle：https://jsfiddle.net/pjdixit/kfev4rss/4/

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

Answer 2

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

在不添加 bootstrap class input-lg 的情况下，您可以通过在输入样式上设置高度并相应地调整填充来解决您的问题（在 Firefox 中）(height - (padding-top + padding-bottom) = height available for your text)。或者，您可以将 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 有一个稍微不同的问题，可以通过缩小填充（或删除它）并在样式上设置明确的高度来解决。

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

Input text field not working in Internet explorer 10

html

javascript

internet-explorer-10

twitter-bootstrap-3