ロゴの隣にリンクを入れたいのですが、なぜか改行されて2段になります。
HTML5が使えるIE10以上では折り返さないのですが、
互換モードを利用すると折り返してしまいます。
どこを直せばよいか誰かわからないでしょうか?
<div id="groupHeaderLogo"> <a tabindex="-1" href="#"> <img src="images/logo.jpg" height="17"> </a> <div id="globalHeaderLogout"> <a tabindex="-1" href="#">ログアウト</a> </div> </div>
CSS
/* groupLogo */ #groupHeaderLogo{ margin: 0px 0 0 0; padding: 10px 0px 0 0; width: 100%; text-align: right; } #groupHeaderLogo a{ text-decoration: none; margin: 0; padding: 0; } /* Logout */ #globalHeaderLogout{ margin: 0 0 0 15px; padding: 1px; width: 86px; text-align: right; vertical-align: middle; /*上下中央*/ float: right; } #globalHeaderLogout a{ margin: 0; padding: 0px; width: 80px; /* ボタン幅 */ color: #ffffff; text-decoration: none; text-align: center; display: block; font-size: 12px; cursor: pointer; font-weight: bold; border-radius: 3px; /*角を丸く*/ } #globalHeaderLogout a:link, #globalHeaderLogout a:visited{ color: #454545; background-color: #dddddd; } #globalHeaderLogout a:hover, #globalHeaderLogout a:active, #globalHeaderLogout a:focus{ color: #ffffff; background: -moz-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100)); background: -webkit-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100)); background: linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#646464', GradientType=0); /* IE7,8,9 */ }
globalHeaderLogoutのid指定を外すと上手くいくのですが、スタイルが無い状態になるので困っています。
誰か教えてください
「互換モードを利用」とありますが、古いieが対象なのでしょうか?状況によってはcss3が適用されないだけかと思いますが、質問者さんの表示させたい対象環境等(osやブウラウザのバージョン等)を併せて提示して頂くと、より良い回答を得れると思います。
-追記-
HTMLやCSS全体での影響が考えられますので、古いie向けの「条件付きコメント」や「ieハック」等を試してみると良いかと思います。
回答1件
あなたの回答
tips
プレビュー