« Mac ヘルプビューアが表示されない問題 | メイン | 本質は演歌? »

いろんなブラウザで表示確認してみたんですが

いろんなブラウザでサイトを見てみたんですが、やっぱりというかなんというか。
IEとSafariでものすごい表示の不具合発見。

IE
ulのa要素にリスト画像(矢印の)を背景画像として配置したが、リスト項目が複数行にわたると次の行頭にも矢印がついてしまっていた。IEではリストのマーク部分は背景が適用されないので、それが原因かなーと思ったのだが、そもそもulはデフォルトではoutside(マークは項目の外に配置)で、しかもlist-style-type:noneになっているのに、なぜこんなインデント表示(一行目だけpadding: 15pxがきいている)になるんだーー。インラインになってたってこと?
…結局、a要素に適当にdisplay: blockをつけてあげたら解決した。
インラインやらブロックやらの意味がまだよくつかめない。

Safari
グローバルナビゲーションが思いっきり上にいっちゃってた。 position:absolute;bottom: 0が、Safariでは無視されるのか。(でもright: 0はちゃんと拾っていたのに??)何が理由かわからない。
グローバルナビゲーションの親要素がposition:staticになっていたため、position:relative下に入れたがやっぱりだめ〜〜
仕方ないのでtopからの距離を入れる。するとIEでの表示が今度は怪しくなった。ナビゲーションがちょっと上にすっとんでしまう。
MAC版IEは終了という話なので、こっちを無視することにする。

MDNの「プロとして恥ずかしくないWEBレイアウトの大原則」(プロじゃないけど)って本を見ながらやってたんですが、なんというか…ブラウザごとの違いって頭痛いですな。
ああもうこんな時間だよ…(泣)

グッジョブだったらポチッと→

コメントを投稿

月別アーカイブ

2017年
2016年
2013年
2012年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
           

Blogのフィードを取得

Powered by
Movable Type 6.3.3