SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

問題

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

google-plus-vertical-align-baseline

答え

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;}

関連するメモ

コメント