質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML

    8692questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Visual Studio

    1772questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • バージョン管理

    30questions

    バージョン管理はコンピューター上にファイルとして格納されているドキュメント・プログラム・その他の情報の変更履歴等を管理するものです

IEバージョンのレイアウト崩れ

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 1,042

hiro28

score 1

初めての質問投稿させていただきます。

IE7で表示されているページのレイアウトをIE9、11でもきれいに
表示させていのですが、どういった方法があるのでしょうか。
(visual studio 2005を使用しています。)

aspxファイルの<head>内に以下のコードを書いて
IE9でページを表示してみましたが、レイアウトは崩れている状態です。
(上記コードを書いていないときのレイアウトと比べると、
レイアウトの崩れ方が変わっただけでした。)
・追記したコード
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

現状、私が一番実現できそうな方法は条件付きコメントを使って、
IEバージョンごとにcssを読み込むというやり方ですが、
手間がかかりそうで避けたいところです。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • aKusano

    2015/08/17 22:45

    確認ですが、DOCTYPEは記述されていますか? 記述されているとしたらどのようなコードになっていますか?

    キャンセル

  • hiro28

    2015/08/17 23:55 編集

    >記述されているとしたらどのようなコードになっていますか? 以下のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; また、ご意見をいただく参考になるかはわかりませんが、 開発者モードでIE9を開いてドキュメントモードとブラウザモードの設定をIE7にしてみましたが、 まだレイアウトは崩れていました。

    キャンセル

回答 5

+2

結論から言ってしまえば、現代のブラウザに合わせて根本的に作り直すほかないと思います。

IE7時代のコードを書き直して今のブラウザにすることを考えれば、同様のデザインを1から作ったほうが、おそらく手間もかからないでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

手間がかからず対応ができるならWeb界隈のクリエイターがIEに対してこんなに恨みや不満を蓄えることはなかったと思いますよ?
実際対応しようと考えるとIEのそれぞれに互換性のあるものだけを使うように作り直すか、完全にデザインを組みなおす、現在のデザインと同様のものを他のバージョンでも正常に表示されるように、それぞれに対して適用するためのCSSを記述するといった形になるかと。
(CSSハックやコメントを用いることになると思いますが)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

0

返信遅くなってすみません。 さまざまのご意見ありがとうございました。

最終的に下記のような改修を行うことで対応しました。 対応方法: ①ウェブページに表示されるテーブルに設定されている CSSプロパティに「table-layout:fixed」を追加 ②vbでは各テーブルのCssClassには上記を追加したCSSを設定

こちらでほぼレイアウト崩れが解消されました。

ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

どのブラウザのどのバージョンをサポート対象にするかを明確に決めるのが先決かと思います。
現状のページがどの程度の規模・複雑さであるか、更にはどんなコーディングスタイルなのかによっても変わるでしょうが、現実問題として、殆ど需要の無いブラウザに過度に拘るのは得策ではありません。
また、各部の崩れに個別に対応しても埒が空かないと思いますので・・・

0. 対象の中でもどれをメインに据えるかを決める
  1.  メインブラウザ向けに全体的なレイアウト(各領域の配分)を再現する
  2.  対象ブラウザ全体で表示状態を確認し問題があれば対応する
  3.  個別のパーツを所定の場所へ配置し、メインブラウザ向けにレイアウトを整える
  4.  対象ブラウザのそれぞれに対して必要な対応を追加する

言葉で書くほど単純じゃないです(非常に泥臭い作業になります)が、とにかくIEはバージョン毎に癖(仕様の違い?バグ?)が激しいので、IE対応だけに振り回されてしまうと収拾が付かなくなってしまいます。
その上で、IE問題については個々の具体的な問題毎に対応策を練ってゆくのが『結果的には近道』なのだと思います。

問題の内容に応じて
  • 条件付きコメント
  • CSSハック
  • CSSハックによらない代替法
  • 外部CSSを避ける
などの組み合わせを先人達の知恵に頼りながら実践して行く以外に道はないと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

他の方が仰るように、最初から設計しなおせるのであればそれがベストだと思います。


現状、私が一番実現できそうな方法は条件付きコメントを使って、 
IEバージョンごとにcssを読み込むというやり方ですが、 

どのブラウザでも同じように見せたいのであれば、ブラウザごとにCSSファイルを切り替えるのは保守性が下がります。
そのファイル内でフォローした方がよいでしょう

.some-class { width: 500px; border: solid 1px black; }
* html .some-class { width: 498px; } # IE6では widthの計算が異なる

もしこのように各ブラウザをフォローするような書き方をするのであれば、
CSSハックはけっこう読みづらいので、Modernizr 等のライブラリを使って分岐を書きやすくすることをオススメします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8692questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Visual Studio

    1772questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • バージョン管理

    30questions

    バージョン管理はコンピューター上にファイルとして格納されているドキュメント・プログラム・その他の情報の変更履歴等を管理するものです