- ベストアンサー
ie6、ie7 で文字が大きくなってしまう（装飾が無効になる）
お世話になります。 dreamweaver cs4でホームページを製作しています。以下該当ホームページのソース冒頭部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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を元の状態に編集しなおして再アップしてもなぜかそのままの異常な表示です（もちろん更新ボタンも押してます）。バックアップから上書きすることで正常表示されます。 該当ホームページを掲載するわけにはいかないので聊か抽象的で申し訳ないのですが、このような現象に心当たりがある方はいらっしゃらないでしょうか？よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
提供された2つのコンテンツを見比べた瞬間に、まず不具合の出ている新ヴァージョンの方ではbase.cssが正しく読み込まれていない事がわかりました。フォントサイズのみならず、背景色なども全く適用されていなかったので。 で、base.cssを開いてみると、新ヴァージョンの方は日本語部分（コメントやフォントの名称）が文字化けしていました。 単に、CSSのエンコードの問題だった様ですね。質問者さまのHTMLファイル自体はShift_JISなのに対し、新ヴァージョンのbase.cssはUTF-8になっていました。 新ヴァージョンのbase.cssをUTF-8で読み込んでから（そうするとCSSファイルの文字化けが直ります）新たにShift_JISで保存し直し、新ヴァージョンのHTMLファイルを再度ブラウザで閲覧してみまししたら、旧ヴァージョンと同じく支障なくbase.cssが適用された状態になり、勿論文字サイズの問題もなくなりました。 試してみて下さい。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
> htmlソースの方はすべての場合でdreamweaverのバリデータでチェックをしています。（問題無しとのこと） それは単にマークアップが文法的に間違っていないという事に過ぎません。CSSでのスタイルの適用に不備（自分が意図する様なスタイルを実現する為に適切な設定ができていない）があったとしても、そこまでバリデータはチェックはできません。バリデータが検出できるのは明かな文法違反の箇所のみです。 【A】「元に戻すべくその後続けてhtmlとcssを元の状態に編集しなおして再アップしてもなぜかそのままの異常な表示」 に対して、 【B】「バックアップから上書きすることで正常表示」 という事は、【A】の時には「元に戻した”つもり”」になっていも実際は「何かが編集前のヴァージョンとは異なっている」と考えるしかないと思いますが。 質問者様が回答／アドバイスを希望するにあたって最低限しなければならないのは、せめて、【B】と今回トラブルが起きたヴァージョンの差分（変更箇所）を具体的に提供される事だと思います。「まずは状況でピンと来るような方がいらっしゃればと思いまして」と言いますが、あの程度の情報（DOCTYPEがわかるのみで、HTMLもCSSも具体的なソースが何一つない）ではエスパーでもない限り、それすら無理でしょう。 > イメージの位置を変えるのに試したことは、イメージリンクをdivに入れ子した状態で『#id名 img』にマージンを設定、パディングを設定、『#id名』にマージンを設定、パディングを設定の４パターンです。 という事からかろうじて推測できるのは、セレクタの設定が何らかの点で的確ではなくなってしまい、フォントのプロパティに関する継承が切れて（値が変更されて）しまっているのでは…という程度でしょうか。
補足
厳しくも暖かいご回答感謝します。 「補足要求」と頂きましたので甘えてサンプルページを作らせていただきました。現状 http://www.ucatv.ne.jp/~h_p_s/ 『ページ下のSAMPLEボタンの位置を45px右側に移動させたい』が真の目的です。 http://www.ucatv.ne.jp/~h_p_s/sample/ 上は４パターンのうちの一つを再現してみました。こちらの説明不足でお手数お掛けして申し訳ありませんがもう一度ご回答お待ちしております。よろしくお願い致します。
- rorona667
- ベストアンサー率31% (31/99)
htmlもcssも見れない（冒頭のソースを書かれてもあまり意味は無いですね^^;）ので何とも言えないですが、バックアップからの上書きで正常に見れるのであるならば、何か(";"など)を誤って消している可能性があります。 今一度、cssの"font"プロパティをよく確認してみては？
お礼
早速の回答ありがとうございます。 おっしゃる通りです。html,cssを提示できれば良いのですけど、まずは状況でピンと来るような方がいらっしゃればと思いまして。。 htmlソースの方はすべての場合でdreamweaverのバリデータでチェックをしています。（問題無しとのこと） cssの方も今回について言えば元の状態から編集し始めてアップ→駄目→dreamweaverで（css切り替え）元に戻すで戻しています。その後再アップしても・・・という状況です。質問内容のイメージリンクの位置を変えたいという方はこちらで、その後の元に戻らないって方はソフトの方で質問するべきかもしれないです。ごめんなさい。
お礼
完璧です！パーフェクトな回答ありがとうございました。（逆にソフトに任せっきりな自分が恥ずかしい） 実のところかなり長い時間悩んでいて、まさか質問してから半日で解決出来るとは思ってませんでした。。 abrilさん、大感謝です。ありがとうございました！