Поле ввода текста не работает в Internet Explorer 10

1

На этом простом веб-сайте (www.enverter.com) тип ввода = "текст" не работает в Internet Explorer 10. Однако он отлично работает с Chrome и Safari.

Без работы я имею в виду это: Bootstrap Form Контроль типа ввода текста (с некоторым пользовательским стилем) не отображает текст в 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>
  • 0
    ты можешь возиться?
  • 0
    Он также не работает в Firefox (то есть поля ввода не отображают то, что вы вводите). Можете ли вы предоставить свой код?
Показать ещё 8 комментариев
Теги:
twitter-bootstrap-3
internet-explorer-10

2 ответа

1
Лучший ответ

Хорошо, я смог заставить его работать и отображать как ожидалось во всех браузерах после нескольких незначительных модификаций:

Я добавил класс "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, но Test Input 2 (который использует модифицированный стиль, описанный выше) должен работать во всех основных браузерах.

Поделиться
2

Альтернативный ответ, потому что мне нужно было знать, почему. В Firefox используется другая модель выбора размеров коробки. Различия в заполнении формы в Firefox и Opera/Chrome/IE

Без добавления начального класса 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 имеет немного другую проблему, которая была бы исправлена, уменьшив заполнение (или удалив его) и установив явную высоту в стиле.

Поделиться
  • 0
    Престижность за изучение сути проблемы в Firefox.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню