＜ 1 ＞ Verdanaトリック : "Verdana"をfont-familyの最初に配置する

-------------------------------------------------
font-family:"Verdana";
-------------------------------------------------

「いいね」のような日本語が書かれていた場合は、"Verdana"は、ブラウザ固有の「ディフォルト日本語フォント」に交換される。Windows-Chromeでは、"Meiryo"であり、MacOS-Chromeでは、"Hiragino Sans"である。

しかしこれは、以下のように指定した場合とは若干異なる。
-------------------------------------------------
font-family:"Hiragino Sans","Meiryo";
-------------------------------------------------
上記のように指定した場合、フォントは少し上よりに表示されてしまう。"Verdana"から交換された「ディフォルト日本語フォント」の"Meiryo"や"Hiragino Sans"でないと中央にならない。

原因は分からないが、推測すれとすれば、"Meiryo"と指定した場合は、WindowsXPから搭載されたオリジナルの"Meiryo"の位置で表示されるが、ディフォルトで呼ばれた"Meiryo"の場合は、2017年にChromeのディフォルトのフォントをメイリオに変えた設計者が、縦中央になるように位置を微調整したのではないだろうか？

色々なブラウザを考慮に入れた場合、"Verdana"から常に「ディフォルト日本語フォント」が引き出されるという保証はないので、"Verdana"の後に"Hiragino Kaku Gothic ProN"と"Meiryo"を付け加えておく。

- CHA_css_stdff.class.php
-------------------------------------------------
font-family:"Verdana","Hiragino Kaku Gothic ProN","Meiryo";
-------------------------------------------------





＜ 2 ＞ 偶数・奇数の調整

上記の「Verdanaトリック」を用いたとしても、「コンテイナーの高さ」及び「フォントのサイズ」の偶数・奇数によっては、ラベルが上下にずれることがある。

高さ(偶数)＋フォントサイズ(偶数)がベストな組み合わせである。

-------------------------------------------------
[Sランク]
高さ(偶数)＋フォントサイズ(偶数)
- IE11で「いいね」が上による。(数字はOK)

[Aランク]
高さ(奇数)＋フォントサイズ(奇数)
- Androidでフォントが上による

[Bランク]
高さ(偶数)＋フォントサイズ(奇数)
- Safari 13.1.1でフォントが上による

[Cランク]
高さ(奇数)＋フォントサイズ(偶数)
-------------------------------------------------

- IE11対策 (CHA_css_stdff.class.php)
-------------------------------------------------
/* IE10+ specific styles */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	.ajax-iine .aiin-css .aiin-label {
		vertical-align:-100%;
	}
}
-------------------------------------------------






＜ 3 ＞ 3%下げる

フォントサイズが12pxから16pxまでの間にある場合は、
フォントを３％下げる。
-------------------------------------------------
CHA_html_vmc.class.php
-------------------------------------------------
<?php if ( CHASys::getLocale() == "jp" ): ?>
<?php if ((12 <= $fs)&&($fs <= 15)): ?>
	position:relative;
	top:3%;
<?php endif; ?>
<?php endif; ?>
-------------------------------------------------

ただしFireFoxに適用してはいけない。
「@-moz-document url-prefix()」を用いて、
topを0に戻しておく。
-------------------------------------------------
@-moz-document url-prefix() { 
	.%css-ctar% .aiin-<?php echo $this->prefix; ?> {
		top:0%;
	}
}
-------------------------------------------------