FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リストタグの「表示の乱れ」

友人のサイト構築を手伝っている時に,素人のウェブデザイナーにとっては実に不思議としか言いようがない経験をしました。

何はともあれ次の画像をご覧下さい。

リストタグの表示の乱れ


「ネックレス」の部分(注:赤色の囲み)が左に寄っています。他の項目とテキスト以外は同じですから,CSSの書き間違いではありません。

正しくは

リストタグの正しい表示


このように表示されなければなりません。

この現象が発生するブラウザはインターネットエクスプローラー(=IE)です。今回は【IE7.0】が手元になく確認できませんでしたが,【IE6.0】と【IE8.0】で確認しました。

  ※他の主なブラウザ(Safari, Firefox, Chrome)の最新版では発生しませんでした。

なおかつ,

ここからが摩訶不思議なことなのですが,

友人のサーバーと私のサーバーにまったく同じデータをアップロードしたところ,【私のサーバー + IE8.0】という条件では表示の乱れはありませんでした。

しかし,

【友人のサーバー + IE8.0】において,上記の現象が発生しました。両者のサーバーは「さくらインターネット」のレンタルサーバーです。

全く同じデータがサーバーによって表示が異なるなんてことがあるのでしょうか?!

さらに,

両者のサーバーのデータを【IE6.0】で表示させると,どちらにも表示の乱れがありました。

これらは複数のマシンで確認しましたが,どのマシンでもまったく同様の結果です。



リスト表示の乱れの原因



この現象にあってから数時間を要してやっと原因を見つけました。(と自分では考えています)

表示が乱れた時の「問題箇所のソース」は

ソース01


このようになっています。赤色の部分に注意です。『改行』していることを表すために赤色で塗って視認性を高めています。

これは何かの本に書いてあったのですが,文書構造を分かりやすくする為に「ソースを美しく書く」を実践しているからです。実際,ソースを秩序正しく整理しておくと確認や修正の際に該当箇所を見つけやすくなります。また,間違いの発見もより容易です。

上記のソースを

正しいソース


のように書き換え,『改行』を無くしました。

そうすると

確認可能なすべの条件で表示の乱れが無くなりました。(^.^)v


これでリスト表示の乱れは解消できましたが,疑問は残ったままです。

1.サーバーによる表示の違いは一体何だったのか?

2.ソースはどこまで美しく書けばよいのか?

これらの疑問は解消されていません。どなたか情報をお持ちでしょうか。特に,『2』の疑問に対する答えは何としてもガイドラインとして知っておきたいと思います。
SEO初心者による初心者のための情報でした。


2009年10月20日

東雲の星@素人ウェブデザイナー



にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村 ★応援よろしく!


テーマ : webサイト作成
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
プロフィール

東雲の星

Author:東雲の星
サイトを構築しながら,同時進行でSEOを勉強している趣味レベルのウェブデザイナーです。ここはそのブログ編という位置づけです。

にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村

最新記事
カテゴリ
リンク
最新コメント
最新トラックバック
月別アーカイブ
アクセスランキング
[ジャンルランキング]
コンピュータ
10163位
アクセスランキングを見る>>

[サブジャンルランキング]
Webサイト作成
467位
アクセスランキングを見る>>
検索フォーム
メールフォーム

名前:
メール:
件名:
本文:

RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。