IE8とMozillaFirefoxで正常に動作するアプリケーションを構築していますが、IE7では動作しません。私はfirebugが好きで、それを使用してアプリケーションをデバッグするのが好きですが、現在、ブラウザーの互換性に苦労しています。開発したアプリケーションはIE8、FF11で動作しているが、IE7では動作していないことがわかりました(主にレイアウトに大きな影響があります)。ブラウザ関連の機能にjqueryを使用していますが、jqueryが機能しているようです。IE7でレイアウトを正常に機能させるにはどうすればよいですか?使用されるフレームワークはspring3、hibernateです。CSSの膨大なセットがあります。ここに貼り付けると便利だとは思いません。相対的な位置を使用し、左上の位置を使用しました。パディングとマージンは使用されますが、それほど多くはありません。 。それが原因ですか?考えられる提案は何ですか?なぜIE7とIE8は物事を異なる方法でレンダリングするのですか?IE7用に別のCSSセットをロードしますか?春を使っていますか?それは良い解決策ですか?はいの場合、春にそれを行う方法は?クライアントは主にIE7を使用しているため、firebugを使用して破棄し、IE8デバッガーに依存しますか?
4 に答える
アプリのUIはIE7用に最適化することもできます。IE7で問題を引き起こしているプロパティ(位置など)に対して、IE7に固有のcssをいくつか追加する必要があります。cssプロパティの前にドットを追加します。好き。
h1{
font-size: 28px;
color: #d39933;
padding-bottom: 5px;
.padding-bottom: 10px; //For IE7
}
ブラウザの互換性は非常に長いトピックであり、正しく実行するために複数の領域をカバーしています。
IE 7またはIEブラウザーが唯一の問題である場合は、それCSS Conditional comments
が最適なソリューションです。
IE7ブラウザーに必要なすべての修正を含む、別のスタイルシートを作成します。次に、スクリプトを呼び出すのはそのような方法であり、IE7のみがそれをレンダリングします。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7fix.css" />
<![endif]-->
現在、上記のスタイルシートは、ブラウザがIE 7の場合にのみ適用されます。したがって、すべての修正が適用され、レイアウトが修正されます。:)
条件付きコメントの詳細については、この記事をお読みください。
IE7とIE8のCSSサポートは異なり、バグや奇妙な点も異なります。CSSを解釈する標準化された方法からの逸脱に対処するために、これらのブラウザーに条件付きでCSSをロードするのが一般的な方法です。IEの条件付きコメントを使用して追加のCSSをロードできます。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]-->
これがあなたが読むことに興味があるかもしれない条件付きコメントに関する記事です:http ://www.quirksmode.org/css/condcom.html
あなたの場合、魔法の解決策はありません、そしてあなたは苦しむ必要があります; =)、しかし私はあなたに役立ついくつかのヒントを与えることができます。
1 / IEの組み込みデバッガーは異なるバージョンよりも改善されているため、最新バージョンのIEを使用してデバッグし、デバッガーウィンドウ(F12)の[ブラウザーモード]コンボボックスを使用して「InternetExplorer7」に設定する必要があります。それは本当にうまく機能します、私はこのモードと実際のIE 7の違いを決して見つけませんでした、そしてあなたはIE9のデバッグ機能を持っています。
2 / IE7には、特定のCSSまたは場合によってはjavascriptで回避する必要のあるバグがいくつかありますが、レイアウトの違いが必ずしもバグであるとは限りません。IE7のレイアウトの問題は、多くの場合、問題のある制約の結果であり、ブラウザーによって解決方法が異なります。典型的な例:絶対位置では、左、右、幅を指定します。制約が多すぎて、ブラウザーがまったく同じように処理しない場合があります。
3/IE固有のcss
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" src="/css/ie7.css" />
<![endif]-->