Solve the problem that the CSS setting font size less than 12px cannot take effect in 360 browsers and Google Chrome browsers.

Today, I found a problem when testing the compatibility of magento templates-Google Chrome does not support fonts smaller than 12px ?! In fact, this problem was found during browser compatibility testing in the first few projects. I didn't care too much at the time, because there was no confusion. Today, because the CSS size is set to 10 PX, and the parent Div width can only accommodate a font width of 10 PX. That's why Google's browser is confused. This is not enough to be killed by customers. You have to find a solution! A group was added just a few days ago-Web Front-end development group 3. As a result, I yelled at them two times in the group and immediately answered the question. If I forget it, I will record it by the way. Thank you!

Google Chrome's default minimum font is 12px, And the fonts smaller than 12px are all displayed in 12px. Sometimes we need a small font, especially when creating an English website. However, there are still solutions. See the following:

Add a Google browser-specific attribute in HTML or body.

<Style>

HTML, body {

-WebKit-text-size-adjust: none;

}

</Style>

Note: If this attribute is used, the browser font cannot be scaled in or out! (That is, press Ctrl to scroll up or down the middle mouse button)

Font size cannot be scaled normally in Google Chrome and 360 browsers

Some friends say that it is useful to define the font size in units with EM (characters. I personally tested that the font in EM should be smaller than or smaller than 12px in Google browsers. So it is useless. For the moment, I only know the above method. If anyone has other methods, please share them.