web-dev-qa-db-ja.com

IEおよびHTML5 doctypeの問題

素晴らしいHTML5ボイラープレートを使用しています。それは素晴らしいプロジェクトですが、IE 8および7（おそらく8ですが、まだ試していません）でのレンダリングに大きな問題があります）

ファイルにはHTML5 doctypeがあります。

<!doctype html>
<head>

しかし、問題は次のような完全でいDoctypeがないことです...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

あらゆる種類のレンダリングの問題が発生します：マージンによる中央揃え：自動が機能せず、高さ、幅、マーティング、パディングはすべて狂ったように動作し、レイアウトはすべて<!doctype>だけで壊れますが、古いものに切り替えると、すべてがうまく機能します（まあ、素晴らしいではありません、それはまだIEですが、予想どおり）

HTML5 BoilerplateにはModernizerが付属しており、これを修正する必要があると思いますが、機能していません。私の「研究」（Google）から、IEがquirksモードの幅<!doctype>に入るので、質問は...

IE <!doctype>？でQuirksモードに入るのを防ぐ方法はありますか？

または、少なくともマージン、幅、パディングなどを壊さないようにしますか？

編集：これは頭全体です：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
html5internet-explorerhtml5boilerplate
13
Juan Ignacio

IEは、そのdoctypeで互換モードにはなりません。ボイラープレートは、IEの問題を修正し、それらを引き起こしていないはずです。<html> Doctypeの後の要素。それを追加して、状況が変わるかどうかを確認します。 HTML5では必要ありませんが、欠落している場合は、IEまたは定型句がドキュメントに従っておかしくなります。

また、Doctypeの後のコメントを削除するだけで、問題は解消されます。

16
Rob

これを<head></head>タグに入れてみてください：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

既に存在する場合は削除してください。目的の結果が得られる場合があります。

10
Downpour046

IEはHTMLのdoctypeで奇妙なことはしません-それが全体のポイントです！

特に、この新しいDOCTYPEの良い点は、現在のすべてのブラウザー（IE、FF、Opera、Safari）がHTML5を実装していないにもかかわらず、それを見てコンテンツを標準モードに切り替えることです。これは、今日HTML5を使用してWebページの作成を開始し、非常に長い間使用できることを意味します。

（http://ejohn.org/blog/html5-doctype/）

ただし、Doctypeの前に何か（改行、コメントなど）を含めることはできます。

あなたが何をしているのかを確認します-HTML5 doctypeはあなたのブラウザを奇妙にさせません。

7
Rich Bradshaw

BOMなしのUTF-8としてファイルを保存してみてください。助けてくれました。

1
Pažout

投稿したfull headマークアップに問題はありません。これは、ブラウザ機能の検出に使用される気の利いたJavaScriptライブラリである Modernizr を含むボイラープレートで広く使用されている標準のマークアップです。

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

現在のアプリで使用していますが、どのブラウザでも問題はありません。私はそれを次のように使用していますが：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

IE条件付きコメントをテストするために、IE9、IE8およびIE7を大文字と小文字の両方でテストしました doctype 、ダブルチェック用。

IE7で確認した唯一の奇妙なことは、<!doctype html>の代わりにwebfont（アプリの4つすべて）が時々レンダリングに失敗することでした<!DOCTYPE html>。

参考までに確認したところ、2013年9月24日に HTML5ボイラープレートプロジェクト に IE条件付きコメント のサポートが削除されました。条件付きコメントがプロジェクトに導入されたときは確認できませんが、 プロジェクトがGithubに移植されたときにbodyタグの周りにあった 2010年1月24日に確認できます。

0
Wallace Sidhrée

条件付きコメントとの互換モードに入る可能性があります。 .htaccessファイルまたはその他のサーバー構成ファイル内でx-ua-compatibleヘッダーサーバー側を設定することをお勧めします。

0
Divya Manian

私はあまり「ウィズ」ではありませんが、条件付きhtmlを実行し、IE8以下のHTML 4.01 doctypeを次のように宣言することはできません。

<!-- HTML 5 doctype -->
<!doctype html>

<!-- HTML 4.01 Doctype -->
<!--[if lte IE 8]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->

それが古いブラウザーで機能しない場合（ブラウザーが2つのdoctypeを読み取るため）、これを試すことができます：

<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>
0
funkylaundry