web-dev-qa-db-ja.com

IE7およびIE8のHTML5およびCSS3

フロントエンドが新しいHTML5タグ（ヘッダー、ナビゲーション、セクションタグ）と新しいCSS3スタイル属性（丸い境界線）を使用するWebアプリケーションを継承しました。 Google ChromeおよびSafariでは、このWebサイトはすばらしいように見えます。

ただし、クライアントは現在、IE7およびIE8のWebサイトが壊れていると不平を言っています。すべてが整列していないため、ほとんどのスタイルがレンダリングされません。

このWebサイトをIE7およびIE8で機能させる最も簡単な方法は何ですか？私は次のことを行う必要があります：a）IEブラウザが新しいHTML5およびCSS3機能を受け入れるようにハックを適用しますか？b）フロントエンドの完全な書き直し？

htmlinternet-explorer-8internet-explorer-7css
17
John

この素敵なスクリプト（.js）を試してください :)
そして角が丸い場合は 他のスクリプト（.htc） を使用します

1番目を使用：

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

2番目のように使用します。

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

幸せなサイト構築:)

元のリンクはアクティブではなくなり、HTML5shivは移動しました。

GitHubで利用可能になりました

https://github.com/aFarkas/html5shiv

28
Répás

HTML5の場合、 Remy SharpのHTML5 Shim をお勧めしますが、効果を確認するには、IEユーザーはJavaScriptを有効にする必要があります。基本的に、IE6 /のエラーを悪用します。 7/8を使用すると、document.createElement関数を使用してJavaScriptで最初に作成されたHTML5要素を認識できます。

CSSには、CSS3の効果をシミュレートするために「動作」プロパティ（IEに固有）を使用する CSS3 PIE などのいくつかの異なるハックがあります。私はこれらを個人的に控えましたが、私の経験では、それらは非常に簡単に壊れ、結局は価値があるよりも面倒になります。代わりに、CSSを作成してIEで正常に低下するようにしています。そのため、丸いボタンは正方形に見えますが、それでも見栄えは良いです。

5
Karl Nicoll

あなたはcss3pie http://css3pie.com/ を試すことができますこれはcss3の問題に役立ちます。

2
Alistair Laing

modernizr http://modernizr.com/ が良い選択です。

2
Alex G

KarlとAlistairに追加するために、私のサイトでCSS3Pieに問題が発生しました。 4か月前のCSSコードを使用したところ、CSS3のグラデーションがブロックされていました<input type="text"/>フィールドがIE7またはIE8に表示されない。私が再び彼らのサイトを再訪し、彼らの新しいCSSコードを見て初めて、それは機能しました。

レッスンは常にプラグインのウェブサイトで最新のコードをチェックしています

1
Danger14

新しいセマンティックタグに関係なく、CSS3効果をIE7/8で生成する場合は、asp.NetグラフィッククラスをIE7/8のフォールバックとして使用できます。 .netグラフィックを使用して作成できる効果の一部は次のとおりです-

ボーダー半径、線形グラデーション、放射状グラデーション、ボックスシャドウ.

グラフィッククラスを使用してasp.netページでこれらの効果を作成し、そのページをHTML要素の背景画像としてレンダリングできます。つまり.

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

ここで、パラメーター値は、エフェクトを作成するために必要な出力に関して入力されます。高さ、幅、色など.

1
Umesh Chaurasiya