- 締切済み
ブラウザ別のマージン解消は？
画像を使って複数個の<A>タグを設置しています。 IEでは理想のデザインになっているんですが、サファリ、クロームでは画像同士がくっついたデザインになっています。 CSSを使っています。 これってマージンが認識されていないのですかね？ 今は、サファリ等にあわせて<IMG src="1 .JPG" style="margin-top:10px;">等とし画像の上下間隔を取っていますが、 そうするとIEでは、ものすごく間隔が大きくなってしまいます。 見た感じでは、サファリ等の１０PXは、IEでは３０～４０PXに成っているように感じます。 解消する方法はないのでしょうか？ 精通されている方が居られましたら、宜しくご指導願います。
- kfjbgut
- お礼率50% (2665/5259)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
はい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> とURLまで書かないとなりません。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 1999年のHTML4.01の勧告以来 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 著者 HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より なのですから、15年経ちました。そろそろstrictにしましょう。それ以後のXHTML1.1、XHTML2.0(中止)、HTML5(昨年勧告)では、strictしかないのですから・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的なことが理解できていないようです。 A要素は非置換インライン要素で画像は置換インライン要素ですから、 ⇒10.6 高さとマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_heights_and_margins ) IEの互換モードは、とても多くのバグ--ウェブ標準と異なる解釈をする--を持っていますから、IEを基準にサイトを作ろうとするとすると失敗します。IEで作成する場合はDOCTYPE宣言を標準モードで動作するように書いておきます。 HTML4.01でしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> または、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 前者はHTML4.01移行型、後者は厳密型になります。 いずれのHTMLを使われているか分かりませんが、それでIEも他のブラウザと同じになる事が多いです。 ここはA要素は関係ないでしょう。 [例] <div class="nav"> <ol> <li><a href=""><img src="" width="" height="" alt="トップ"></a></li> <li><a href=""><img src="" width="" height="" alt="新製品"></a></li> <li><a href=""><img src="" width="" height="" alt="マニュアル"></a></li> <li><a href=""><img src="" width="" height="" alt="問合せ"></a></li> </ol> </div> というナビゲーションリストがあったとします。 スタイルシートで、 div.nav{width:20%;position:relative;} div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;} div.nav ol li+li{margin-top:10px;} div.nav ol li img{display:block;width:100%;height:auto;} とするだけでウィンドウ巾の20%で二つ目の画像以降は10px隙間が空くはずです。 <div class="nav"> <ol> <li><a href=""><img src="" width="" height="" alt="トップ"></a></li> <li><a href=""><img src="" width="" height="" alt="新製品"></a></li> <li><a href=""><img src="" width="" height="" alt="マニュアル"></a></li> <li><a href=""><img src="" width="" height="" alt="問合せ"></a></li> </ol> </div> ⇒ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) なお、使われているとは思いますがウェブサイト作られているのでしたら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxが便利です。特に Firebug( https://addons.mozilla.jp/firefox/details/1843 )は欠かせません。マージンやパディングの関わりがすぐ分かる。
補足
私は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と記述していますが相談のような誤差がありますよね・・
補足
駄目ですね。記述が自動削除されます。受け付けてくれません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">－－－(1) ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">－－－(2) ↓ 上書き保存 ↓ (1)に戻ります。