IE8の画像クリック時の点線について
- IE8の動作で困っております。Pタグ内の画像にリンクを貼り、その画像をクリックした時のクリックの点線が、IE8のみ画像の下側の点線が表示されません。
- Pタグをとると、下側にも点線が表示されるのですが、仕様上、Pタグは必要となります。またIE6、IE7、FF3.5は、Pタグの有無に関係なく下側のリンク点線は正常に表示されます。
- 解決方法をご存じの方ご教示くださいませ。
- ベストアンサー
IE8 フォーカス＆クリック時の点線について
IE8の動作で困っております。 Pタグ内の画像にリンクを貼り, その画像をクリックした時のクリックの点線が、 IE8のみ画像の下側の点線が表示されません。 Pタグをとると、下側にも点線が表示されるのですが、 仕様上、Pタグは必要となります。 またIE6、IE7、FF3.5は、Pタグの有無に関係なく下側のリンク点線は正常に表示されます。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> </head> <body> <p><a href="test.html"><img src="http://www.geocities.jp/ajax3210/test.gif" border="0" /></a></p> </body> </html> ※環境は、WindowsXP SP3です。 解決方法をご存じの方ご教示くださいませ。 よろしくお願いいたします。
- moon333
- お礼率87% (28/32)
- CSS
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
どういう理屈かわかりませんが、DTDを「XHTML 1.0 Strict」に変更したら解消されました。 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'> 不思議ですね…。
その他の回答 (1)
- salonpath
- ベストアンサー率48% (194/399)
毎度おなじみインターネットエクスプロラーって感じですけど なんだこれ、気持ち悪いなぁ ちょっと試してみてとりあえず3つ、IE8しか確認してません。 aにdisplay:inline-table;かdisplay:inline-block;（隙間消える） それかimgにvertical-align:top;（画像の下に隙間がある）
お礼
ご回答ありがとうござます。 毎度ですが、IEにはいつも悩まされますね。 早速ご回答の3つを試してみました。 3つとも問題なくクリックの点線は表示されました！ 3つ目は画像の下に余白ができるので今回は見送りですが…。 ご回答をヒントに色々と試したら、 imgに vertical-align:text-bottom; でもクリック点線は表示されました。
関連するQ&A
- hタグ 印刷時の背景画像
おせわになります。 hタグで背景画像を使用しており、 プリント表示させると、その背景画像が消えてしまいます。（IE6、IE7） プリントアウト時も同じように印刷させたいのですが、 対策はありますでしょうか。 ※今の段階でどうしても不可能な場合は、 media="print"指定で、border-bottomで対応しようと考えております。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css"> <!-- h1 { padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x bottom; } --> </style> </head> <body> <h1>テスト見出し</h1> </body> </html>
- ベストアンサー
- CSS
- utf-8 文字化け
メモ帳でhtmlページを作成してたのですが、日本語を入力してIEで確認したら文字化けになります 原因がわからず困っていました よろしくお願いします IE10 IE 表示 エンコードはutf-8 自動選択にすると日本語表示になります <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ABC</title> <style type="text/css"> </style> </head> <body> <h1>ようこそ</h1> <p></p> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- IE6で表示がずれて困っています。
IE6で表示がずれて困っています。 firefox・IE８では表示されるのに、IE6ではずれてしまいます。 質問したい事が２つあるのですが、 １つ目は インラインフレームでIE６だけサイズが大きくなる。 原因とサイズの揃え方を教えて下さいm(__)m 画像添付とソースをはります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p><img src="images/news.gif" width="490" height="29" /></p> <iframe src="news.html" id="newsi" frameborder="0" scrolling="auto"></iframe> </div> </body> </html> ●CSS● *{ margin: 0; padding: 0; } div{ width:490; height:200; } #newsi{ width: 486px; height: 150px; border: 2px #F96 solid; } --------------------------------------------------------- 一つ目は以上です。 二つ目もここにで質問したかったのですが、文字数が足りないためもう一度質問させていただきますm(__)m 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いいたしますm(__)m
- ベストアンサー
- HTML
- pre要素の￥nの扱いについて IE６ IE７ Firefox1
pre要素を使用してFirefoxでは改行されて表示されていますが、IE６、IE７では改行コードが認識されず1行に全て表示されて横スクロールバーが出てしまいます。 解決方法はありませんか？ ここから---------------------------------------------------- <? echo '<?xml version="1.0" encoding="EUC-JP"?>'; $arg = "━━━━━━━━━━━━━━━\n"; $arg .= "タイトル\n"; $arg .= "━━━━━━━━━━━━━━━\n"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP" /> </head> <body> <pre> <?=$arg?> </pre> </body> ここまで---------------------------------------------------- $argの改行コードを<br />に書き換えてpreを使用しないほうがよいでしょうか？
- 締切済み
- PHP
- IE7で○の記号が小さく表示されてしまいます
IE7で○の記号が小さく表示されてしまいます。 調べたところ、IE7のバグで文字コードにutf-8を使用してフォント指定をしない場合に起きるようです。 以下のサイトを見てコードを修正したのですが、○のサイズは小さいままでした。 http://blog.btmup.com/web-general/ie7-symbol-small.html こちらのサイトの文字コードはutf-8ですが、○は正常なサイズで表示されます。 http://okwave.jp/qa/q4611331.html 何が悪いのでしょうか？ どなたかご指摘をお願いします。 /**** ソースコード ****/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style type="text/css"> body { font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } </style> <body> <p>test</p> <select> <option value="1">○</option> <option value="2">●</option> <option value="3">△</option> <option value="4">◎</option> </select> </body> </html>
- 締切済み
- HTML
- 前後の全角スペースを削除すると文字化けする
PHP初心者です。 trimファンクションを使って前後の全角スペースを削除したいのですが $test = " 左右に全角スペースがある文字列 "; echo trim ( $test , " " ); だと問題なく表示されるのですが以下のようにテキストボックスに入力した文字の 前後の全角スペースを削除しようとすると最初の１文字目が文字化けします。 ●test_input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <form action="test.php" method="get"> <dl> <dt>文字を入力してください。</dt> <dd><input type="text" name="test" size="50" maxlength="50" id="test" /> </dd> </dl> <input type="submit" value="送信する" /> </form> </body> </html> ●test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <p>入力文字</p> <?php $test = ($_REQUEST['test']); echo ($test); ?> <br /> <br /> <p>trim ( $test , " " )</p> <?php echo trim ( $test , " " ); ?> </body> </html> どこがいけないのでしょうか？ よろしくお願いします。
- ベストアンサー
- PHP
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
- document.body.scrollTop の数値が正常に取得できない
とあるJavascriptを組んでいるのですが、document.body.scrollTopの値が取得できず困っています。 検証の結果、下記のプログラムだと数値が取得できず、１行目の<!DOC...>を削除すると正常に取得することができます。 スタイルシートを多用している関係で、１行目を削除してしまうと他のレイアウトが崩れてしまうため、これ以外で正常に動かす方法はないでしょうか？ 検証ブラウザ：IE6.0.2900、Firefox 1.52 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>TEST</title> </head> <body> <p> </p> <p> </p> 【中略】 <p> </p> <p><a href="javascript:alert(document.body.scrollTop);">document.body.scrollTopの数値を表示</a></p> </body> </html>
- 締切済み
- JavaScript
- DOCTYPE宣言とdocument.body.clientHeight
お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
- cssがIE6で適用されない理由は
教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 ご回答のとおり「XHTML 1.0 Strict」にすれば解消されますね。 そのままだと画像下に余白ができるので、 img に vertical-align:text-bottom; で余白がとれました。 いつもはDreamweaverでTransitionalのマークアップをしているので、 Strictの勉強も必要ですかね。。 その他、解決方法をご存じの方はご教示くださいませ。