select和input不会继承字号body font-size

<! DOCTYPE html >
< html lang ="zh-Hans-CN" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=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" >
汉字
< form >
< select >
< option > 汉字 </ option >
< option > English </ option >
</ select >
< input type ="text" value ="汉字" />
< input type ="submit" value ="汉字" />
</ form >
< div id ="footer" >
< form id ="change_ui" method ="get" action ="#" >
页面宽度： < input type ="text" id ="page_width" name ="page_width" value ="960px" />
字号大小： < 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 >

在Firefox 3.6.9、IE 9、IE 8中，select和input不会继承字号，无论在body中声明font-size是多少，select和input仍然显示为浏览器默认字号（一般为16px）。

所以写CSS要写上：

select,input
{
font-size:1em;
}

 

Firefox、IE 8的整体放大都能够放大select、input，为什么偏偏不能继承？真奇怪。