Champ de texte de saisie ne fonctionnant pas dans Internet Explorer 10

Sur ce site Web simple (www.enverter.com), input type = "text" ne fonctionne pas dans Internet Explorer 10. Toutefois, il fonctionne correctement avec Chrome et Safari. Bootstrap Form Le contrôle du type d'entrée "text" (avec un style personnalisé) n'affiche pas le texte dans Internet Explorer 10 et FireFox mais s'affiche comme prévu dans Chrome, Safari et Edge.Champ de texte de saisie ne fonctionnant pas dans Internet Explorer 10

Je ne sais pas si c'est un problème de bootstrap ou quelque chose qui me manque. J'ai les méta-tags suivants au début de la section head et j'utilise la version 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">

Je ne vois aucune erreur dans la console.

Voici le jsFiddle: https://jsfiddle.net/pjdixit/kfev4rss/

Tout le monde a des pointeurs sur la façon de résoudre ce problème?

Code complet est collé ci-dessous

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

Source

2017-09-22 Prasad Dixit

pouvez-vous bidouiller? – rafon

Cela ne fonctionne pas non plus dans Firefox (ce qui signifie que les champs de saisie n'affichent pas ce que vous tapez). Pouvez-vous fournir votre code? –

Je n'avais pas accès à l'ordinateur de développement au moment de l'affichage. Je ferai d'autres tests demain et j'essaierai d'affiner le problème et de le poster sur JSFidde. Merci @ –

OK, j'ai pu le faire fonctionner et rendre comme prévu sur tous les navigateurs après quelques modifications mineures:

J'ai ajouté la classe « entrée-atterrisseur »et a retiré la marge et le rembourrage de ma classe 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; 
}

est le violon ici qui démontrent ceci: https://jsfiddle.net/pjdixit/kfev4rss/4/

Le texte de Test 1 (qui utilisait le style précédent) ne sera pas visible et n'affichera pas le texte tapé dans Internet Explorer et Firefox, mais Test Input 2 (qui utilise le style modifié décrit ci-dessus) devrait fonctionner dans tous les principaux navigateurs.

Source

2017-09-25 22:14:04

Une réponse alternative, parce que j'avais besoin de savoir pourquoi. Firefox utilise un modèle de dimensionnement de boîte différent. Form padding differences in Firefox and Opera/Chrome/IE

Sans ajouter la classe d'amorçage input-lg, vous pouvez résoudre votre problème (dans Firefox) en définissant une hauteur sur le style d'entrée, et le réglage du rembourrage en conséquence (height - (padding-top + padding-bottom) = height available for your text). Ou, vous pouvez ajouter l'élément box-sizing à la css avec une valeur de 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 */ 
}

Je devine que IE 10 a un problème légèrement différent qui serait fixé en faisant le rembourrage plus petit (ou retirer) et définir une hauteur explicite sur le style.

Source

2017-09-26 06:19:22

Bravo pour l'examen du cœur du problème sur Firefox. –

Champ de texte de saisie ne fonctionnant pas dans Internet Explorer 10

Répondre

Questions connexes