ボンジュール・マドモアゼル

本サイトの情報は自己責任にてご利用下さい。

[未分類] Google +1 ボタン 改行させないようにするには

 
Google +1 ボタン 改行させないようにするには
推奨されるのは1番目の方法です。ただし、IE7以下の対応が必要なら2番目の方法を採る必要があります。
先に2番目の方法から説明します。
次のように g:plusone 要素をクラス名を付けたSPAN要素で囲み、

<span class="HOGE"><g:plusone href="..."></g:plusone></span>

CSSで

.HOGE div {*display: inline !important;}

と指定します。このとき !important 宣言もきちんと付けて下さい。
このスタイル指定では IE7 以下のドキュメント・モードにのみ適用させるため、アスタリスクハックを行っています。
何故、これで直るかの説明は省略します。以下のサイトを参考にして下さい。

Google+1ボタンがIEだと折り返して表示されることへの対処(暫定版)
http://ameblo.jp/itboy/entry-10967359379.html


「標準モード」と「互換モード」
HTMLドキュメントは、「標準モード」と「互換モード」のどちらのレイアウトモードが適用されるかによってレンダリング結果が異なります。
次に説明しますが Google +1 ボタンで改行が発生する現象にはこれが関係しています。
レイアウトモードの詳しい説明は、以下を参考にして下さい。

標準モードと互換モードについて
http://www.dspt.net/html_tag/mode.html
'Standards' vs 'Quirks' modes
http://www.w3.org/International/articles/serving-xhtml/Overview.en#quirks

Google +1 ボタンで行が折り返す原因
Google +1 ボタンは、スクリプトによって display: inline-block スタイルが指定された DIV要素に展開されます。
Firefox で開く場合には、このスタイル指定によってボタンがインラインで表示されます。
しかし、Internet Explorer でドキュメントが互換モードなどで表示されている場合、このスタイルが適用されません。
IE には「互換モード」と IE のバージョン毎の「標準モード」の属性値を持つドキュメントモードがあります。
display: inline-block のレンダリング結果は、このドキュメントモード毎に異なります。
下表にその対応状況を示します。
ドキュメントモードdocument.compatModedocument.documentModedisplay: inline-block
互換モード"BackCompat"5改行する
標準モード(IE7)"CSS1Compat"7改行する
標準モード(IE8)"CSS1Compat"8改行しない
標準モード(IE9)"CSS1Compat"9改行しない

Internet Explorer 9 では、開発ツール(F12で開く)を利用すれば、ドキュメントモードを切り替えることができます。
以下のサンプルで実際の動作を確認できます。


対処
Google +1 ボタンを改行させないようにするには、適切な文書型宣言を記述するか、METAタグを使って IE8 以上の「標準モード」で表示させることです。

IE にはツール → 互換性表示設定というものがあります。この設定次第で対象のページが互換モードで開かれる場合があります。
<<Windows Update (KB2647516, KB2656356, KB2618444) 80070011 エラー | ホーム | データベースウィンドウの更新>>

コメント

コメントの投稿

管理者にだけ表示を許可する

画像の文字を半角数字で下記ボックスに記入ください。
文字が読みにくい場合はブラウザの更新をすると新しい文字列が表示されます。