0

最新バージョンの safari/firefox と chrome を使用してサイトを設計するというミスを犯しました。IE 10で問題なく見えることを簡単に確認しましたが、フォールバックにあまり入れませんでした。その後、「よりセクシーな」CSS テクニックを使い始め、IE のことを忘れてしまいました。

私には弁護の余地がありません。それはばかげた間違いでした。

このサイトは以前のバージョンの IE では見栄えが悪いです。I.E8 で簡単にテストしました。ナビゲーション バーがページ全体に広がり、entypo フォントが表示されず、スピナーがめちゃくちゃです。これは最初のページで、他のページはまだ表示できていません。

さらに悪いことに、私は Mac を使用しています。その上にある Windows 用の VM は Windows 8 を実行しており、最初に古いバージョンの Windows をインストールしないと古いバージョンの IE をインストールできません。

大惨事に近いです。このサイトは kingpetroleum.co.uk にあり、どんな助けも大歓迎です。

編集:フォントフェイスの詳細が機能しない

@font-face{font-family:'EntypoRegular';
src:url(data:font/woff;charset=utf-8;base64,d09GRg ...... ...... ..... etc);
src:url(data:fnt/truetype)format(''truetype); //deliberately mispelt there to avoid pasting a ton of code
url('entypo-webfont-webfont.svg#EntypoRegular') format('svg');
    font-weight:normal;
    font-style:normal
4

3 に答える 3

4

PIE.js のような JS スクリプトの使用を検討しましたか?

http://css3pie.com/documentation/pie-js/

于 2013-08-29T10:34:57.750 に答える
2

ページの問題を修正するのはそれほど難しいことではありません。まず第一に、modernizr ( http://modernizr.com/ ) を使用してください。これには、新しいセマンティック タグに役立つ HTML5 震えがあり、最近の Web ページでは必須です。また、ノーマライズ ( http://necolas.github.io/normalize.css/ ) を使用すると、ブラウザー間の互換性が大幅に向上します。

大画面用のメディア クエリを使用している場合 (モバイル ファースト アプローチ)、Respond.js を使用するか、IE の条件付きスタイルを追加する必要があります (以前の回答で引用したように)。

グラデーションの場合は、背景として png を指定するか、サポートされていないブラウザーで単色の背景を使用します (グレースフル デグラデーション)。

同じことが境界半径にも当てはまります。

3D カルーセルは、CSS3 をサポートするブラウザーに追加されると考えられる場合を除き (プログレッシブ エンハンスメント)、CSS3 に依存するべきではありません。それが重要な場合は、jQuery を使用してください。

フォント アイコンは IE8+ で動作するはずです。コードに問題があるか、フォント形式が不足している可能性があります。icomoon.io を使用する必要があります (svg フォントをインポートできます)。

適切なコードを使用し、適切なプラクティス (グレースフル デグラデーションやプログレッシブ エンハンスメントを使用) に固執していれば、IE8 で大きな問題が発生することはありません。ページがすべてのブラウザーで同じようにレンダリングされるわけではなく (すべきでもない)、本質を失ってはならないことに注意してください。

于 2013-08-29T12:10:53.260 に答える