Eingabetextfeld funktioniert nicht im Internet Explorer 10

Auf dieser einfachen Website (www.enverter.com) funktioniert der Eingabetyp "text" im Internet Explorer 10 nicht. Bei Chrome und Safari funktioniert er jedoch einwandfrei.Eingabetextfeld funktioniert nicht im Internet Explorer 10

Ich meine dies nicht: Bootstrap Formularsteuerung von "Text" Eingabetyp (mit einigen benutzerdefinierten Styling) zeigt keinen Text in Internet Explorer 10 und FireFox aber wie erwartet in Chrome, Safari und Edge angezeigt.

Ich bin mir nicht sicher, ob es Bootstrap-Problem oder etwas anderes ist, das ich vermisse. Ich habe folgende Meta-Tags am Anfang des Kopfbereichs und ich benutze Bootstrap 3.3.4 Version.

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

Ich sehe keine Fehler in der Konsole. Hier

ist die JSFiddle: https://jsfiddle.net/pjdixit/kfev4rss/

Wer hat Hinweise darüber, wie es zu beheben?

kompletter Code wird unter

eingefügt

<!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>

Quelle

2017-09-22 Prasad Dixit

können Sie es fiedeln? – rafon

Es funktioniert auch nicht in Firefox (dh die Eingabefelder zeigen nicht, was Sie eingeben). Können Sie Ihren Code angeben? –

Ich hatte zum Zeitpunkt der Veröffentlichung keinen Zugriff auf den Entwicklungscomputer. Ich werde morgen noch ein paar Tests machen und versuchen, das Problem einzugrenzen und es auf JSFidde zu posten. Danke @ –

OK, ich in der Lage war, damit es funktioniert und auf allen Browsern nach einem paar kleineren Modifikationen wie erwartet machen:

Ich habe die Klasse „Input-lg "und entfernt Marge und Polsterung aus meiner CustomInputStyle Klasse

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

Hier ist die Geige, die dies beweisen: https://jsfiddle.net/pjdixit/kfev4rss/4/

Der Text von Test Input 1 (der den vorherigen Stil verwendet hat) ist nicht sichtbar und zeigt in Internet Explorer und Firefox keinen getippten Text an, aber Test Input 2 (der das oben beschriebene modifizierte Styling verwendet) sollte in allen gängigen Browsern funktionieren.

Quelle

2017-09-25 22:14:04

Eine alternative Antwort, weil ich wissen musste warum. Firefox verwendet ein anderes Boxgrößenmodell. Form padding differences in Firefox and Opera/Chrome/IE

Ohne die Bootstrap Klasse Hinzufügen input-lg, können Sie entweder Ihr Problem (in Firefox) lösen, indem eine Höhe auf dem Eingang Stil und Einstellen die Polsterung entsprechend (height - (padding-top + padding-bottom) = height available for your text) Einstellung. Oder können Sie das box-sizing Element zum css mit einem Wert von content-box hinzu:

.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 */ 
}

Ich vermute, dass IE 10 ein etwas anderes Problem hat, die, indem sie die Polsterung befestigt werden würde kleiner (oder Enfernung) und Festlegen einer expliziten Höhe für den Stil.

Quelle

2017-09-26 06:19:22

Ein großes Lob für den Kern des Problems in Firefox. –

Eingabetextfeld funktioniert nicht im Internet Explorer 10

Antwort

Verwandte Themen