Question

在这个简单的网站（www.enverter.com）上，输入类型=“文本”在Internet Explorer 10中不起作用。但是，它适用于Chrome和Safari。

通过不工作我的意思是：Bootstrap Form控件的“文本”输入类型（带有一些自定义样式）不会在Internet Explorer 10和FireFox中显示文本，而是在Chrome，Safari和Edge中按预期显示。

我不确定这是否是引导问题或我遗漏的其他问题。我确实在head部分的开头设置了以下meta标签，我正在使用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使用不同的盒子大小调整模型。 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有一个稍微不同的问题，可以通过使填充更小（或删除它）并在样式上设置显式高度来解决。

Answer 2

好的，经过几次小修改后，我能够在所有浏览器上按预期方式工作并进行渲染：

我添加了课程＆＃34; input-lg＆＃34;并从我的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（使用上述修改的样式）应该适用于所有主流浏览器。

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

2 个答案: