ie6、ie7 で文字が大きくなってしまう（装飾が無効になる）

Question

お世話になります。
dreamweaver cs4でホームページを製作しています。以下該当ホームページのソース冒頭部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

今まで問題なく運用されていたホームページなのですが、今回新たに設けたイメージリンクについてcss内で位置を動かした際に問題が起こりました。

文字が極端に大きくなって表示されてしまいます（レイアウトこそ崩れていませんがcssの文字の装飾が一部無効になっているような感じです）。

opera9.64、ie6、ie7で確認を行ったところie6、ie７で起こりoperaでは起こりません。
（dreamweaverのプレビューでは問題ないのですが）
イメージの位置を変えるのに試したことは、イメージリンクをdivに入れ子した状態で『#id名 img』にマージンを設定、パディングを設定、『#id名』にマージンを設定、パディングを設定の４パターンです。
結果すべての場合で上記現象が起こりました。

さらに、元に戻すべくその後続けてhtmlとcssを元の状態に編集しなおして再アップしてもなぜかそのままの異常な表示です（もちろん更新ボタンも押してます）。バックアップから上書きすることで正常表示されます。

該当ホームページを掲載するわけにはいかないので聊か抽象的で申し訳ないのですが、このような現象に心当たりがある方はいらっしゃらないでしょうか？よろしくお願いします。

abril · Accepted Answer

提供された2つのコンテンツを見比べた瞬間に、まず不具合の出ている新ヴァージョンの方ではbase.cssが正しく読み込まれていない事がわかりました。フォントサイズのみならず、背景色なども全く適用されていなかったので。

で、base.cssを開いてみると、新ヴァージョンの方は日本語部分（コメントやフォントの名称）が文字化けしていました。
単に、CSSのエンコードの問題だった様ですね。質問者さまのHTMLファイル自体はShift_JISなのに対し、新ヴァージョンのbase.cssはUTF-8になっていました。
新ヴァージョンのbase.cssをUTF-8で読み込んでから（そうするとCSSファイルの文字化けが直ります）新たにShift_JISで保存し直し、新ヴァージョンのHTMLファイルを再度ブラウザで閲覧してみまししたら、旧ヴァージョンと同じく支障なくbase.cssが適用された状態になり、勿論文字サイズの問題もなくなりました。

試してみて下さい。

abril · Answer

> htmlソースの方はすべての場合でdreamweaverのバリデータでチェックをしています。（問題無しとのこと）

それは単にマークアップが文法的に間違っていないという事に過ぎません。CSSでのスタイルの適用に不備（自分が意図する様なスタイルを実現する為に適切な設定ができていない）があったとしても、そこまでバリデータはチェックはできません。バリデータが検出できるのは明かな文法違反の箇所のみです。

【A】「元に戻すべくその後続けてhtmlとcssを元の状態に編集しなおして再アップしてもなぜかそのままの異常な表示」
に対して、
【B】「バックアップから上書きすることで正常表示」
という事は、【A】の時には「元に戻した”つもり”」になっていも実際は「何かが編集前のヴァージョンとは異なっている」と考えるしかないと思いますが。

質問者様が回答／アドバイスを希望するにあたって最低限しなければならないのは、せめて、【B】と今回トラブルが起きたヴァージョンの差分（変更箇所）を具体的に提供される事だと思います。「まずは状況でピンと来るような方がいらっしゃればと思いまして」と言いますが、あの程度の情報（DOCTYPEがわかるのみで、HTMLもCSSも具体的なソースが何一つない）ではエスパーでもない限り、それすら無理でしょう。

> イメージの位置を変えるのに試したことは、イメージリンクをdivに入れ子した状態で『#id名 img』にマージンを設定、パディングを設定、『#id名』にマージンを設定、パディングを設定の４パターンです。

という事からかろうじて推測できるのは、セレクタの設定が何らかの点で的確ではなくなってしまい、フォントのプロパティに関する継承が切れて（値が変更されて）しまっているのでは…という程度でしょうか。

rorona667 · Answer

htmlもcssも見れない（冒頭のソースを書かれてもあまり意味は無いですね^^;）ので何とも言えないですが、バックアップからの上書きで正常に見れるのであるならば、何か(";"など)を誤って消している可能性があります。

　今一度、cssの"font"プロパティをよく確認してみては？

ie6、ie7 で文字が大きくなってしまう（装飾が無効になる）

提供された2つのコンテンツを見比べた瞬間に、まず不具合の出ている新ヴァージョンの方ではbase.cssが正しく読み込まれていない事がわかりました。

> htmlソースの方はすべての場合でdreamweaverのバリデータでチェックをしています。

この回答への補足

htmlもcssも見れない（冒頭のソースを書かれてもあまり意味は無いですね^^;）ので何とも言えないですが、バックアップからの上書きで正常に見れるのであるならば、何か(";"など)を誤って消している可能性があります。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　htmlもcssも見れない（冒頭のソースを書かれてもあまり意味は無いですね^^;）ので何とも言えないですが、バックアップからの上書きで正常に見れるのであるならば、何か(";"など)を誤って消している可能性があります。