divとaタグの関係

質問

ある顧客の前任者が画面を１６分割にするページを作成したようです。
それはそれで大変便利なのですが、doctype もない状態でした。

その１区画はこんな感じです。chromでは文字が出ませんでした。
<a href="http://www.yahoo.co.jp"><div class="link1">YAHOO</div></a>

divで区切っていますが明らかに逆だろうと思い以下のように修正しました。
<div class="link1"><a href="http://www.yahoo.co.jp">YAHOO</a></div>

すると今度はIEとchromでリンク先に飛ばなくなってしまいました。
この問題は!DOCTYPEを追加したらIEでは解決しました。

しかし、chromでは相変わらず文字が出ず、リンク先にとびません。
修正前のコードではchromで文字は出ませんがリンク先にとびます。

ここで行き詰まってしまいました。CSSとかも見直していますが、
とりあえず上記までの考えで良いのか皆さんの意見をお伺いしたいと思います。

回答No.3

ORUKA1951 · ベストアンサー

No.2です。
＞それにしてもIEって結構強力に作られているんですね。

　いえ、IEが我々を最も悩ます一番の問題児なのです。いわゆるウェブ標準に従わない時代が長く、IEでなければ見られないページが氾濫してしまった。逆にウェブ標準のサイトがIEでは崩れてしまう。マイクロソフトは、過去との互換のためいつまでも、非標準にしがみついていたため、混乱が続きました。IE8あたりから、やっとウェブ標準に方向転換してくれましたが・・・。

　今後はといいたいところですが、マイクロソフト自身が「クソ」と言っているIE6もいまだに使い続けられています。そのため、ウェブ開発者はただひとつの問題児のために頭を抱えることが続いている。

　問題のあるサイトを問題があると指摘してくれないブラウザが、一番の困り者なのですよ。

お礼

IEが問題児なのですか。まあ独自仕様もあるようですし。

それよりも原因が分かりました。
divの中のpaddingの設定が原因でした。

aタグにline-heightを割り当てて解決です。
連休前に解決して良かったです。
今回は良い教訓になりました。

回答No.2

ORUKA1951

どんな!DOCTYPEを追加したのかわかりませんが・・
　いずれにしても、原因はいつか書では無いように思います。
とりあえず、スタイルシートを外して、きちんと表示されるか？Lynxを使うと良いです。
「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )」

　また、
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
や
★The W3C Markup Validation Service ( http://validator.w3.org/ )
を使うとより詳細がわかるでしょう。

スタイルシートは
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/ )
てチェックしましょう。

　まずエラーをなくしてからですね。

　考え方としては、「<a>要素にはインライン要素しか含むことが出来ない」で良いです。HTML5では、変わります。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［12.2 A要素　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )］より

お礼

ご回答有り難うございます。
仰る通り、ブラウザが変わったらどうするんだって話になって
divとaを入れ替えたら解決だよと思ったら、嵌ってしまいました。

それにしてもIEって結構強力に作られているんですね。

回答No.1

neko-ten

CSSわからんから何とも言えないけど・・・
インラインであるa要素の中に、ブロックであるdivが入るのはおかしいね。

link1のCSSでなんか指定してるんじゃないのかね。

お礼

ご回答有り難うございます。
divとaタグの関係は私の考えで合っていましたか。

CSSの中身はposition:absoluteで、
top、left、width、height、colorの指定がされています。

chorom上でもきれいに色分けはできているので
レンダリングで大きく失敗しているということもないようです。