Jetpack共有ボタンの位置を整える（IE向け・アイコンのみ表示の場合）

WordPressのプラグイン「Jetpack by WordPress.com」の共有ボタン。
ボタンのスタイルを「アイコンのみ」にし、「新サービスを追加」でボタンを追加した場合、Internet Explorerで表示がおかしくなってしまいます。

上記のように、追加したボタンだけ位置が若干下がってしまいました。

テーマのstyle.cssを編集。任意の位置に、以下のように記述。IE8〜IE11向けのCSSハックです。

/* =Jetpack share button （for IE）
----------------------------------------------- */
html>/**/body .sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button {
	top /*\**/:-2px\9; /* IE8 */
}
:root .sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button {
	top:0\0/; /* IE9 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button:not(:target) {
    top:0; /* IE10,IE11 */
  }
}

/* =Jetpack share button （for IE）

----------------------------------------------- */

html>/**/body .sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button {

top /*\**/:-2px\9; /* IE8 */

}

:root .sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button {

top:0\0/; /* IE9 */

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.sd-social-icon .sd-content ul li[class*=share-] a.share-custom.sd-button:not(:target) {

top:0; /* IE10,IE11 */

}

これで以下のようになりました。

IE8の場合、私の表示環境では2px位置を上げるとちょうど良かったです。

※IE9・10に関しては開発者ツールで確認しました
※上記ソースで直らない場合、他に読み込んでいるCSSとの兼ね合いも考えられますので、挿入位置などの調整を行ってください
※IE7以前のバージョンでの表示は、上記ソースで修正することができません

F FACTORY

Funaki's private site (・∀・)