Select and input do not inherit the font-size of the font.

  <!  Doctype html  >  
  <  Html  Lang  = "ZH-Hans-CN"  >  
  <  Head  >  
  < Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"     />  
  <  Title  >  Test  </  Title  >  
  < Style  >  
Body
  {  
Font-size  :  16px  ;  
  }  
Select, input
  { 
Font-size  :  1em  ;  
  }  
# Page
  {  
Width  :  600px ;  
Margin  :  0 auto  ;  
  }  
  </  Style  >  
  </  Head >  
  <  Body  >  
  <  Div  ID  = "Page"  >  
Chinese characters
  <  Form  >  
  < Select  >  
  <  Option  >  Chinese characters  </  Option  >  
  <  Option  >  English  </  Option >  
  </  Select  >  
  <  Input  Type  = "Text"  Value  = "Chinese characters"     />  
  <  Input Type  = "Submit"  Value  = "Chinese characters"     />  
  </  Form  >  
  <  Div  ID  = "Footer"  >  
 <  Form  ID  = "Change_ui"  Method  = "Get"  Action  = "#"  >  
Page width:  <  Input  Type  = "Text"  ID  = "Page_width"  Name = "Page_width"  Value  = "960px"     />  
Font Size:  <  Input  Type  = "Text"  ID  = "Font_size"  Name  = "Font_size"  Value  = "20px"    />  
  <  Input  Type  = "Submit"  Value  = "OK"     />  
  </  Form  >  
  </  Div >  
  <  Script  Type  = "Text/JavaScript"  >  
Document. getelementbyid (  '  Change_ui  '  ). Onsubmit  =    Function  ()
{
Document. getelementbyid (  '  Page  '  ). Style. Width  =  This  . Page_width.value;
Document. Body. style. fontsize =  This  . Font_size.value;
  Return     False  ;
}
  </  Script  >  
  <  Div  > 
  </  Body  >  
  </  Html  >    

In Firefox 3.6.9, ie 9, and IE 8, select and input do not inherit the font size, no matter how much font-size is declared in the body, select and input are still displayed as the default font size of the browser (generally 16px ).

So write CSS:

 
  Select, input
{
Font-size: 1em;
}
 

 

The overall amplification of Firefox and IE 8 can all be used to zoom in select and input. Why cannot this problem be inherited? Strange.