ä¸æçChromeæµè§å¨ä¸æ¯æ12px以ä¸åä½ç解å³æ¹æ¡
Chrome 27ä¹åçä¸æçæ¡é¢æµè§å¨ä¼é»è®¤è®¾å®é¡µé¢çæå°åå·æ¯12pxï¼è±æçå没æéå¶ï¼ä¸»è¦æ¯å 为chrome认为æ±åå°äº12pxå°±ä¼å¢å è¯å«é¾åº¦ï¼å°¤å
¶æ¯ä¸æ常ç¨çå®ä½å
微软é
é»ãèæ们å¨å®é
项ç®ä¸ï¼å¯¹äºæ°å/è±æå
容ï¼å
¶ä»åä½çææ¬å¯è½ä¼æç¹æ®çéæ±è¦æ±å®ä»¬ä»¥æ´å°çåå·æ¥æ¾ç¤ºï¼è¿ä¸ªæ¶åå°±éè¦åæ¶æµè§å¨çèªå¨è°æ´åè½äºã
ä¸è¬è§£å³æ¹æ¡æ¯ç¦æ¢webkitæµè§å¨é
ç½®è°æ´ç½é¡µçåä½å¤§å°ãå¦ä¸CSSå®ä¹æ¹å¼ï¼
[css] view plaincopy
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }
å讲ä¸ä¸text-size-adjustå±æ§ï¼è¯¥å±æ§ç¨æ¥è®¾å®æå大å°æ¯å¦æ ¹æ®è®¾å¤(æµè§å¨)æ¥èªå¨è°æ´æ¾ç¤ºå¤§å°ï¼safari 3.0+ï¼chrome 1.0+å¯ä»¥æ¯æãå±æ§å¼ï¼å¯ä»¥ä¸ºä¸ç§ï¼
percentageï¼åä½æ¾ç¤ºç大å°ï¼
autoï¼é»è®¤ï¼åä½å¤§å°ä¼æ ¹æ®è®¾å¤/æµè§å¨æ¥èªå¨è°æ´ï¼
none:åä½å¤§å°ä¸ä¼èªå¨è°æ´
æ®è¯´è¯¥å±æ§æåä¸é¨æ¯ä¸ºiPhoneçsafari设计çï¼ç¨æ¥èªå¨è°æ´æ®éç½é¡µå¨iPhoneææºç«¯åä½çå±ç°é®é¢ï¼ä¸è¿ï¼æ¢ç¶æ¯webkitçç§æå±æ§ï¼ç°å¨ä¹ç»å¸¸ç¨å¨webkitå
æ ¸çæ¡é¢æµè§å¨éå¶é¡µé¢å±ç¤ºãå®é
ä¸ï¼è¿æ¯webkitçä¸ä¸ªbugãå¨ææ°ççChromeå·²ç»ä¿®å¤ã
éè¦æ³¨æçæ¯ï¼ä¸åçç使ç¨-webkit-text-size-adjust:noneä¼é æ许å¤ä¸å¥½çå½±åãæ¯å¦å°å
¶å®ä¹ä¸ºå
¨å±å±æ§çè¯ï¼å¨Chromeä¸å½ç¨æ·æ¾å¤§ç¼©å°é¡µé¢ï¼PCä¸æä½Ctrlæ»å¨é¼ æ æ»è½®å¯ç¼©æ¾ç½é¡µï¼çæ¶åï¼æåå´ç»´æå®ä¹ç大å°èä¸æ¾ç¼©ï¼ç»ç¨æ·å¸¦æ¥çä¸å¤ªå好çä½éªãæ以æ们å¨ä½¿ç¨æ¶ï¼æ好å®ä¹ä¸ºå±é¨ææï¼èä¸è¦å¾çäºä¸å¥html{-webkit-text-size-adjust:none;}äºäºã
ç±äºæ²¡æ -o-text-size-adjustï¼è¿æ ·çCSS å±æ§ï¼å¨ Operaï¼æ们就åªè½éè¿èªå·±æå¨è®¾ç½®äºï¼å·¥å
·->é¦é项->é«çº§->åä½->æå°åä½å¤§å°ï¼åç´ ï¼ã
PCæ¡é¢çChrome 27æ£å¼åæ¶äº-webkit-text-size-adjustå±æ§çæ¯æï¼å®é
ä¸æ¯ä¿®æ£äºåæçbugãå¦æå®ä¹è¯¥å±æ§å¨Chromeè°è¯çªå£ä¼æ¾ç¤ºUnknown property nameï¼ææåå·æå°ä¸º12pxãä½æ¯ï¼ç§»å¨ç«¯chrome/safariç®åä¾ç¶æ¯æ-webkit-text-size-adjustå±æ§ãå 为æ¤å±æ§ç滥ç¨ä¼ä½¿å¾webkitå
æ ¸çæµè§å¨å¤±å»è°èè½åï¼å¯¹äºæè§è§éç¢çæµè§è
é常ä¸å好ï¼å°¤å
¶æ¯ç§»å¨ç»ç«¯ï¼ï¼é£ä¹ç°å¨è¯¥å¦ä½å®ç°åæ¥çéæ±å¢ï¼
æ们å¯ä»¥å°è¯éè¿å¯¹æååºåå±é¨åºç¨ä»¥ä¸æ ·å¼è§£å³ï¼
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
}
12Ã0.75=9ï¼å¯¹äºå
¶å®æµè§å¨æ¥è¯´ï¼12px以ä¸çåå·é½æ¯å¯ä»¥è¯å«çï¼è¿éä»
éè¦å¯¹äºChromeæµè§å¨è¿è¡ç¼©æ¾ãå¯æ¯å¦ä½å辨æ¯Safariè¿æ¯Chromeï¼ç®åå°æ²¡æææçCSS hackãå¯ä»¥éè¿javascriptæ¥å¤ææ¯å¦ä¸ºChromeãå¤ææ¹æ³ï¼var isChrome = !!window.chrome;å½æ£æµä¸ºChromeçæ¶åï¼å°.chrome_adjustè¿ä¸ªç±»æ·»å å°å¯¹åºçæ ç¾ã
ä½æ¯ï¼é®é¢è¿æ²¡æ解å³ãçå°ç½é¡µå¨ä¸ç§æµè§å¨çä¸å表ç°ï¼
1ï¼ãChromeä¸ç±äºå¯ç¨äºç¼©æ¾ï¼æ以å符é´è·åºç°é®é¢ï¼å½±åäºç¾è§ï¼è¿æ¶åå¦æ追æ±å®ç¾ï¼å¯è½ä½ è¿ä¼æ³å°jså¤æ为Chromeååç¨CSSå±æ§letter-spacingå»ä¿®å¤ï¼
2ï¼ãFirefoxä¸è®¤è¯-webkitï¼æ以表ç°æ£å¸¸ï¼9pxï¼
3ï¼ãOpera 12.5+è½å¤è¯å«-webkit-åç¼ï¼Opera 12.15çæ¬ï¼å
æ ¸ææªæ´æ¢ä¸ºwebkitï¼ä½æ¯å·²è½å¤è¯å«-webkit-åç¼äºï¼èä¸å¨æ£æ¥å
ç´ æ¶è¿æ¹æäºåç¼ï¼ï¼ä½åè½å¤æ¾ç¤º12px以ä¸çåå·ï¼ç»æåæäº9Ã0.75ï¼å½±åäºèç¼çè¯å«ï¼è¿æ¶åï¼åå¾ç»operaæ·»å -o-transform: scale(1);è¿ä¸ªå±æ§ã
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1); //é对è½è¯å«-webkitçopera browser设置
}
å
¶å®ï¼æºèª
æªå¨çOperaä¸è´¯ä½¿ç¨èªå·±çå¼æ(Presto)ï¼ä½ç»å¸¸é æä¸äºæè°çâå
¼å®¹æ§é®é¢âãå¨è¶æ¥è¶å¤ç½ç«é对WebKitä¼åçæ
åµä¸ï¼Operaç对çå°±æ¯ï¼å¼å
¥ä¸äºWebKitå¼æçåç¼å±æ§ï¼ä»¥é¿å
å¼åè
å 为ç½é¡µå±æ§éæ©èå½±åOperaåè½çåæ¥ãOpera 12.50å°æ¯å
¶ç¬¬ä¸ä¸ªæ¯æWebkitå±æ§çæ¡é¢æµè§å¨ï¼å
æ¬-webkit-linear-gradientã-o-linear-gradient两ç§ä¸åç±»åã移å¨çæ¬ä¹ä¼ä½¿ç¨åæ ·çæ ¸å¿ãç¸å
³æµè¯çå¼å人åå¯ä»¥ä¸è½½
模æå¨Opera Mobile EmulatorââWindowsãLinuxãMacçæ¬ã