Google browser Chrome yes Webkit The kernel of , There is one -webkit-text-size-adjust Private ownership of CSS attribute , Through it, the font size is not affected by the terminal device or browser .
CSS The style is defined as follows :
-webkit-text-size-adjust:none;

But in the latest version of Google . This attribute is no longer supported , Need to pass through css3 Of transform To solve , The method is as follows :

css part html Layout

body,p{ margin:0; padding:0;}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}

<p><span id="span1"> I am a smaller than 12PX The font of </span></p>

explain :

1.{webkit-transform:scale(0.8);  display:inline-block}  //0.8 Bit scaling factor , I will modify it according to the actual needs , You can only scale elements that can define width and height , and span It's an in-line element ,

Why is it defined  display:inline-block instead of  display:block? To block It's a monopoly , So convert to inline-block

2.{-o-transform:scale(1);}opera Now the latest version is also webkit kernel , The new version of the opera, It is 10px It's the font of .

author :smile. Corner

QQ:493177502

【css】 How to let Chrome Support less than 12px More related articles in the text of

  1. Use css How to make Google support less than 12px Words like 10px

    1. Less than 12px The font of , If the content is fixed , You can cut the content into pictures , No compatibility issues . 2.-webkit-text-size-adjust:none; Old Google ,27 No use after version 3.-webkit-trans ...

  2. Let Google browser chrome Support less than 12px The font of

    webkit Private property of :{-webkit-text-size-adjust:none;} however , In the latest version of Google . This attribute is no longer supported . use css3 Of transform:scale() Zoom size , however ...

  3. solve Chrome Google browser doesn't support CSS Set less than 12px Words of

    In the latest version of Google . This attribute is no longer supported Google browser Chrome yes Webkit The kernel of , There is one -webkit-text-size-adjust Private ownership of CSS attribute , Through it, that is The font size is not set with the terminal ...

  4. CSS3 - chrome, Maxthon ,360 Speed browser does not support less than 12px The solution to this problem is

    google Flow meter chrome, Maxthon ,360 Fast browsers are all based on webkit Kernel browser , Less than... Is not supported by default font-size Less than 12px The size of , By defining font-size Less than 12px The font size is still 1 ...

  5. [Chrome](CSS) solve Chrome font-size Less than 12px Invalid

    Chrome in font-size Less than 12px It will fail . One solution is : -webkit-text-size-adjust:none; ( however Chrome27 And then the support was cancelled ) utilize CSS3 Contraction of ...

  6. solve CSS Less than 12px The text in Google browser display problem

    People who do front-end design often have to contact CSS Problems in , It is estimated that a lot of people will encounter it Chrome In Google browser CSS Set the font to be less than 12px The display is abnormal , Qiang Chuang network is doing magento In the process of template, we met , At first I thought I wrote it myself CSS The problem of , ...

  7. How to make Google browser support less than 12px The font of

    CSS3 There's a new attribute transform, And that's what we're using transform:scale() Write a piece of code <body> <p> I am a smaller than 12PX The font of </p> & ...

  8. Google browser supports less than 12px The font of

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Google Less than is not supported 12px typeface The ultimate solution

    Every browser manufacturer has its own design subjectivity , And these starting points seem to be very good, but often deeply hurt programmers . 1. demand Render specified as Google browser , The shop name is 6-8px( To print small sizes ). 2. Explore 2.1 CSS HAC ...

Random recommendation

  1. be based on python Write weather capture program

    I used to use the weather forecast component of China weather network all the time , But since they upgraded their components, data loading has become very unstable , because JS Blocking often leads to slow website opening . In order to solve this problem, I decided to learn and use now python Write a grab program , Grab... Regularly every day ...

  2. Android The road to learning book recommendation

    Android Develop book recommendations : Introduction to a series of books on learning routes from introduction to mastery JAVA Introductory books : < Introduction to java programming > < Core java & ...

  3. C# Keep the original when compressing the picture Exif Information

    What is Exif Information , What's the use , Baidu Encyclopedia has an explanation : Exif Encyclopedias All in all , It's something that's indispensable to photographers , Usually use Photoshop To compress as long as it's not saved as Web The format will be preserved Exif Information . And we write code to compress the graph ...

  4. 95. Different binary search trees II

    95. Different binary search trees II The question Given an integer n, Build all by 1 ... n A binary search tree made up of nodes . Their thinking This topic is improved based on different binary search trees : For a sequence of continuous integers [left, ri ...

  5. chrome Browser cross domain settings Google Chrome Enable and disable caching and js Cross domain restrictions --disable-web-security

    chrome User default path Win7:C:\Users\[ user name ]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  6. BZOJ3738 [Ontak2013]Kapitał 【 Expand Lucas】

    Topic link BZOJ3738 Answer key review ditto But to eliminate the factor \(10\), Handle \(2^k\) When , Ride back to \(2^{k_1}\) when , It should be calculated at the same time \(5^{k_2}\) If \(k_1 \ge k_2\) ...

  7. eliminate li Inside a Labeled float=left Realization a Tag in li Center inside (ul Inside li Don't center )

    Write it at the front : modify cnblogs Main page menu display problem . Problem description : Add... To the main menu hover It is found that the menu content is not centered . See the picture 1. Online search for information, one of which can be said to be concise , It is also the welfare of the party ( Click me to check the original ) ...

  8. js/jq Countdown plug-in ( One )

    // A lot of times we need to use countdown, like ( Some of the press conference countdown , Second kill countdown , Countdown to activities, etc ), Next, we will introduce two ways to write countdown plug-ins //html structure <!DOCTYPE html> <html la ...

  9. RAC Database RMAN Backup and restore to single node database

    1. First, in the rac Environment with rman Backup database .[oracle@rac1 admin]$ rman target /run{allocate channel c1 device type disk conn ...

  10. BNUOJ 52308 We don&#39;t wanna work! set simulation

    Topic link : https://acm.bnu.edu.cn/v3/problem_show.php?pid=52308 We don't wanna work! Time Limit: 60000msM ...