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

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

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

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

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

よろしくお願いします。

aKusano

2015/08/17 13:45

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

program_er

2015/08/17 14:56 編集

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

行動規範の内容に同意します

回答5件

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

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

投稿2015/08/17 08:08

maisumakun

総合スコア145183

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

投稿2015/08/18 11:47

Cf_cwd

総合スコア730

自己解決

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

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

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

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

投稿2015/12/06 08:38

program_er

総合スコア11

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

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

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

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

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

投稿2015/08/20 14:50

hello-world

総合スコア1342

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

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

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

問題の内容に応じて