• ベストアンサー

a:hoverでfont-weight:bold

a:hoverでfont-weight:boldを使用し IEで確認すると文字と文字の間隔が空くのはバグですか? ご存知の方いらっしゃいます?

質問者が選んだベストアンサー

  • ベストアンサー
  • no4nejp
  • ベストアンサー率100% (3/3)
回答No.2

お聞きしたいことが幾つか。 ・IEのバージョン(5~8) ・文字の間隔とは、一文字ずつ左右に空くのか、それとも上下に空くのか これが分からないと問題の特定は難しいと思います。 また、IEは複合的な理由でバグが発生することがままあるので、 ご質問の条件だけではバグが再現できないと思われます(私の環境では再現不可能でした) 効果のありそうなバグ回避法としては、 バグの出る要素(間隔の空いてしまう文字を含んでいる要素)のスタイルに height: 1%; と指定してみてください(ご存知かもしれませんが)。 他のブラウザに適用したくなければ _height: 1%;(IE5~IE6にのみ適用) または *height: 1%;(IE5~IE7にのみ適用) とすると良いです。 これはIEで起こるバグをある程度回避できる魔法の呪文です。 (詳しくはアンダースコアハックとうをネットでお調べ下さい) お役に立てば幸いです。

m-----c
質問者

お礼

完璧でした。 ありがとうございます

m-----c
質問者

補足

こんばんわ IEの6と7で確認したところ上下に空く事はなく左右のみ感覚が空いてしまいました。 今winで確認できる環境におりませんので月曜日になってしまうかと思いますが、no4nejpさんに教えていただいた方法で試してみたいと思います。 height: 1%;にしろ、アンダースコアハックにしろ、初めて知りました。 これだけでも十分に感謝している次第です。 結果はまた報告させていただきます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • karita_83
  • ベストアンサー率45% (39/86)
回答No.1

私が思うに、文字のひとつひとつが太くなるので それのせいで動いてしまっているのが 文字間隔が大きくなってるように見えてしまうのでは・・・と思うのですが IEだけでおきるのであれば違いますね 他のブラウザではそういったことはないのでしょうか?

m-----c
質問者

お礼

safariとFireFoxでは問題ありません。 >文字のひとつひとつが太くなるので... そうかと思ったんですがIEだけってのが気になってしまいまして ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • IE6・7で確認すると、マウスオーバーした時の文字とアンダーラインがくっついてしまいます

    以下のようにCSSで指定しているのですが、 Firefoxで確認すると少し隙間があって丁度よいのですが、 IE6・7で確認すると文字にアンダーラインが乗っかってしまっているようにみえ、文字が少しみえづらくなってしまっています。 こちらを回避する方法はありますでしょうか? a:hover { font-weight: bold;   text-decoration:underline;    } ちなみにフォントサイズは font-size: 10px;と指定しています。 例の出し方が適切じゃないかもしれません。 仕事で使っているので、どこまでどう出していいのか よくわからず・・・ すみませんが、わかる方がいたら教えていただけないでしょうか?

  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。はじめは一部のリンク箇所だけが反映されなかったのですが、訪問済みになった箇所がどんどん反映されなくなってしまい、しまいにはすべての箇所が反映されなくなりました。ただし、それはunderlineのみでfont colorやboldはしっかり反映されているのです。 これはなぜでしょうか? ちなみにscriptの記述は一切していません。 最初は同様の記述を外部ファイルにしていたのですが うまく読み込めていないのかと思って、htmファイル内に 記述しましたがダメだったというわけです。 <style type="text/css"> <!-- body { font-size: 10.5pt; line-height: 130%} table { font-size: 10.5pt; line-height: 130%} a:hover{ text-decoration: underline; color: #FF0080; font-weight: bold} a:active { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> アドバイスお願いいたします。

    • ベストアンサー
    • HTML
  • HPBでホバーをかけるには?

    HPBでホバーをかけるには? リンク文字をポイントすると、赤に変色するようにするには、GUIでは、どのようにしたらいいのでしょうか?タグではわかるのですが、HPBに乗り換えたばかりですので、ボタン操作でのやり方がわかりません。 よろしくおねがいします。 A:hover { font-weight : bold; color : #f00ca0;}

    • ベストアンサー
    • HTML
  • Excelの関数の文字列""で「"」を文字として認識させたい

    Excelを使ってhtmlタグを一気に作成することが多いのですが、 A2=サンプル ="<span style="font-weight: bold;">"&A2"</span>" ↓ <span style="font-weight:bold;">サンプル</span> と出るようにしたいのですが、「"」を文字として認識させる表記方法が何かあったかとおもうのですが、(JavaScriptでの「\」の様な感じで) どなたかご存知でしたら教えていただけませんか。

  • BoldやItalicのフォントを指定しても

    Wordで文字のスタイルを登録するにあたって、標準はMS明朝+Times New Romanなどでいいのですが、タイトルや強調文字に使用するスタイルを作るべくHG明朝+Times New Roman Boldというセットを作りたくとも、Boldフォントはリストにはなく、無理やり書いても、認識されないときが多いです。 太字やら斜体などのリストから太字を選択すると、日本語フォントのHG明朝まで太字になってしまいますが、これは目的にかないません。 もちろん、太字なしでHG明朝+Times New Romanで設定して、1語1語英単語や数字の上でCtrl+Bを押していくのも論外です。 太字体でなくても、見合った太さの明朝系があればそれでもいいですが、なんとなく逃げですし・・・。

  • a:hoverの重さ

    こんにちは。 マウスを乗せたときに背景色を変えることもできる為、重宝しているCSSのa:hoverなのですが、とても重いのです。 マウスを乗せたときに背景色を変える処理を行っているのですが、マウスを乗せた途端、CPU使用率が90%を超え、格段にスピードが落ちます。 しかし、文字色を変える処理だとスムーズに動くのです。 さらに背景色を変える処理も、ホームページによってはスムーズに動く。 この違いが全く分かりません。 この現象の原因、出来れば解決策まで教えてください。

  • Firefoxでのスタイルシートの記述について

    Firefoxでのスタイルシートの記述について 4つの文字を配置するために (1) font-size:18px; font-weight:bold; color:#000000; margin:127px 72px 0px 40px; (2) font-size:18px; font-weight:bold; color:#000000; margin:64px 72px 0px 40px; (3) font-size:18px; font-weight:bold; color:#000000; margin:101px 72px 0px 40px; (4) font-size:18px; font-weight:bold; color:#000000; margin:65px 72px 0px 40px; と指定しました。IEでは思った位置になったのですが Firefoxでは(2)(3)(4)が下のほうにずれてしまいました。Firefoxに合わせるとIEでの位置が上にずれてしまい頭を悩ませています。 記述の間違いや、アドバイスなどあれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEでのaタグのhover効果

    aタグにonClickを指定し、javascriptを動かすようにしています。またスタイルシートでa:hoverを指定しています。 hrefは指定していません。 <a onClick="javascript:xxxx();">xxxx</a> このようにすると、FireFox,Opera,Safariでは、hoverの効果がでるのですが、IEでは効果がでません。 href=""をaタグに指定してやると、IEでもhoverの効果が効くのですが、htmlのリロードが起きてしまいます。 IEで、hover効果を効かせ、かつリロードさせない方法はないでしょうか。

    • ベストアンサー
    • HTML
  • a:hoverで

    a:hoverを使用して、リンクが貼ってある文章の上にマウスをのせたら下線がでる設定にしようと思うのですが、メニュー項目など一部の文章は、下線を出したくありません。 そのような設定は可能でしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • aタグに直接style=""で:hoverをしたいしたい

    お世話になります。 下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには どのようにすればよいのでしょうか hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。 A:link.menu { text-decoration:none; FONT-SIZE: 12px; COLOR: #0000ff; } A:visited.menu { text-decoration:none; FONT-SIZE: 12px; COLOR: #0000ff; } A:hover.menu { FONT-SIZE: 12px; color:#0000ff; background-color:#66bce2; } A:active.menu { FONT-SIZE: 12px; COLOR: #0000ff; } お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

    • ベストアンサー
    • HTML