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

Question

在这个简单的网站（www.enverter.com）上，输入类型=“ text”在Internet Explorer 10中不起作用。但是，它在Chrome和Safari上可以正常使用。

不起作用的意思是：“文本”输入类型（具有某些自定义样式）的Bootstrap Form Control在Internet Explorer 10和FireFox中不显示文本，但在Chrome，Safari和Edge中按预期显示。

我不确定这是引导程序问题还是其他丢失的问题。 我确实在头部的开头设置了以下元标记，并且正在使用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

另一个答案，因为我需要知道为什么。 Firefox使用不同的框大小调整模型。 Firefox和Opera / Chrome / IE中的表单填充差异

无需添加bootstrap类input-lg ，您可以通过在输入样式上设置高度并相应地调整填充(height - (padding-top + padding-bottom) = height available for your text)您可以使用的高度）来解决问题（在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有一个稍微不同的问题，可以通过使填充较小（或将其删除）并在样式上设置显式高度来解决此问题。

Answer 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/

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

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

问题描述

2 个解决方案

解决方案1
3 2017-09-26 06:19:22

解决方案2
1 已采纳 2017-09-25 22:14:04

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

问题描述

2 个解决方案

解决方案1 3 2017-09-26 06:19:22

解决方案2 1 已采纳 2017-09-25 22:14:04

解决方案1
3 2017-09-26 06:19:22

解决方案2
1 已采纳 2017-09-25 22:14:04