【CSS】Google+のボタンだけ位置がずれる

Tweet

Category css 2015/12/08

問題

他のSNSボタンと一緒に並べると、Google Plus（G+）のボタンだけ上下位置がずれるのですが、なぜ？

答え

Google Plus のボタンは、以下のようなHTMLになっており、「vertical-align: baseline;」が適用されている。

<div style="（略）... vertical-align: baseline; display: inline-block; ...（略）" id="___plusone_連番"><iframe></iframe></div>

もし、他のボタンで以下のようなスタイルシートが適用されていたら、

iframe {vertical-align:middle;}

Google+ボタンも同じスタイルシートが適用されるようにする。

[id^="___plusone_"] {vertical-align:middle !important;}