＜ 1 ＞ フォントサイズと箱の高さ

-------------------------------------------------
結論:

- 箱の高さは奇数のみに限定する。
19,23,27,31,35,39,

- フォントサイズを以下のものに限定する。
11px,13px,16px,19px,19px>
-------------------------------------------------

元々は、箱の高さもフォントサイズも偶数限定であった。
確かに偶数限定の方が一般性があって便利なのだが、
WindowsのクロームとMacのクロームの両方で
フォントをmiddleにするのが非常に難しいということが
わかった。

フォントを垂直方向middleに調整するための要因は、以下の三つであるが、

font-size
line-height
top:[n]em

色々な組み合わせを試しても、偶数限定では、Windowsのクロームと
Macのクロームの両方で成立させるのは無可能である。

最終的に「箱の高さは奇数のみに限定」と「フォントサイズを
11px,13px,16px,19px,19px>に限定」で垂直方向middleを
実現できた。

将来の抜本的な解決だが、Javascriptを用いて、
.aiin-bt-windows
.aiin-bt-macos
のようなフラッグクラスを立てて、調整するのがいいだろう。

補足:
windows vs macos以外のフラッグで有用と思われるのは、
.aiin-bt-firefox
.aiin-bt-ie11

＜ 2 ＞ Hover/Touch

HoverかTouch(Desktopかsmartphone)でcssを切り替える
-------------------------------------------------
@media (hover:hover) {
	.%css-ctar% .aiin-<?php echo $this->prefix; ?> {
<?php $this->cssHover(); ?>
	}
}
@media (hover:none) {
	.%css-ctar% .aiin-<?php echo $this->prefix; ?> {
<?php $this->cssTouch(); ?>
	}
}
-------------------------------------------------

＜ 3 ＞ IE10
IE10はHoverグループに属するが、「@media (hover:hover)」は
IE10では動作しないので、IE10用のメディアクエリを作る
-------------------------------------------------
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	.%css-ctar% .aiin-<?php echo $this->prefix; ?> {
<?php $this->cssHover(); ?>
	}
}
-------------------------------------------------

＜ 4 ＞ FireFox

FireFoxは、Hover/Touchのいずれでもない設定が
必要になるので、FireFox用の@-moz-documentを使用する。
-------------------------------------------------
/* FireFox specific styles */
@-moz-document url-prefix() {
	.%css-ctar% .aiin-<?php echo $this->prefix; ?> {
<?php $this->cssFF(); ?>
	}
}
-------------------------------------------------
デスクトップのFireFoxでは、「Hover」のcssではなくこの項目が
選択されなければいけないので、この項目は、「Hover」の後に
置かなければいけない。

スマートフォンのFireFoxでは、この項目ではなく「Touch」のcssが
選択されなければいけないので、この項目は、「Touch」の前に
置かなければいけない。