Make Google Chrome support fonts smaller than 12px

Private attributes of WebKit: {-WebKit-text-size-adjust: none;} but, in the latest version of Google. This attribute is no longer supported. Use the transform: Scale () of css3 to zoom in and out, but the zoom width will not change. Therefore, an extra span tag is added, and another style dedicated to chrome @ media screen and (-WebKit-Min-device-pixel-ratio: 0) {} is used. In addition: firefox @-moz-document URL-prefix () {}# nav {width: 100%; Height: 34px; Background-color: #000 ;} # nav ul {}# nav ul Li {float: Left; margin-Right: 3px ;}# nav ul Li a {float: Left; font-size: 11px; display: block; Height: 34px; line-Height: 34px; color: # FFF; text-transform: uppercase;} # nav ul Li A: hover, # nav ul Li. selected {background-color: #313131; text-Decoration: none;} # nav ul Li a span {padding: 0px 22px; display: block ;} @ media screen and (-WebKit-Min-device-pixel-ratio: 0) {# nav ul Li a span {padding: 0px 15px;-WebKit-transform: scale (0.916);-o-transform: Scale (1 );}} <Div id = "nav"> <Div class = "pagewraper"> <ul id = "top_menu"> <li> <a href = "index. PHP "> <span> Home </span> </a> </LI> <li> <a href =" Company. PHP "> <span> company </span> </a> </LI> <li> <a href =" machinery. aspx "> <span> machinery parts </span> </a> </LI> <li> <a href =" rigging. aspx "> <span> rigging hardware </span> </a> </LI> <li> <a href =" heat. aspx "> <span> heat exchanger </span> </a> </LI> <li> <a href =" QA. PHP "> <span> Quality Assurance </span> </a> </LI> <li> <a href =" qualification. PHP "> <span> qualification </span> </a> </LI> <li> <a href =" contact. PHP "> <span> Contact Us </span> </a> </LI> </ul> </div>