为什么密码框比 IE 中的文本框小？

根据 Microsoft 的说法，每当 Internet Explorer 提供 HTML 页面结构时，即使提供了 META 标记所提供的正确字符集，它也会使用错误的字符集。

用户输入的 HTML 部分：以下 HTML 代码显示了通用密码输入表单，该表单在 Google Chrome、Firefox、Microsoft Edge 中运行良好，但在IE 中无效。即使我们指定了“ charset=’UTF-8′ ”，IE 中输入框的宽度也是不同的。

  

  
  

  

  

    

      TEXT INPUT:
      

      
      

      PASSWORD INPUT:
      

      
    
  

  

注意：导致 IE 出现这种异常行为的原因在带有以下链接的文档中进行了说明。
https://support.microsoft.com/en-us/help/928847/internet-explorer-uses-the-wrong-character-set-when-it-renders-an-html

解决方案：众所周知，IE 的默认字符集存在一些问题。
让我们研究一些用于克服这个问题的解决方案。

1. 使用 jQuery 的解决方案： jQuery 代码包含在页面加载中。使用 jQuery 使文本和密码输入控制框等宽。

     
   
     
     GeeksforGeeks
     
     
     
       
     
       $(document).ready(function () {
         $("input[type='text']").height(
           $("input[type='password']").height());
     
         $("input[type='text']").width(
           $("input[type='password']").width());
       });
     
   
     
   
     
       
         TEXT INPUT:
         
         
         
         PASSWORD INPUT:
         
         
       
     
   
     

   或者

     
   
     
     GeeksforGeeks
     
     
     
       
     
       $(document).ready(function () {
         $("input[type='password']").height(
           $("input[type='text']").height());
     
         $("input[type='password']").width(
           $("input[type='text']").width());
       });
     
   
     
   
     
       
         TEXT INPUT:
         
         
         
         PASSWORD INPUT:
         
         
       
     
   
     

2. 使用 CSS 的解决方案：根据您的项目将两个输入控件的宽度固定为某个值。这里使用了“14em”宽度，只需将其更改为所需宽度的值即可。

   
   
     
   
     
     
     
   
     
   
     
   
       
   
         TEXT INPUT:
         
   
         
         
   
         PASSWORD INPUT:
         
   
         
       
     
   
     
   
   

3. 通过为输入设置默认字体系列：（最喜欢的解决方案）此方法对所有输入使用相同的字体系列。

   
   
     
   
     
     
     
   
     
   
     
   
       
   
         TEXT INPUT:
         
   
         
         
   
         PASSWORD INPUT: