IE8でこれらの問題が発生するのはなぜですか？

私は、Internet Explorerを除くすべてのブラウザで素晴らしいサイトを持っています。私は現在Internet Explorer 8でテストを行っています。条件付きスタイルシート（ie.css）を使用していくつかのことを成し遂げましたが、わかりにくい問題がいくつかあります。私は、CSSまたはjQueryのいずれかを含む提案には公開されています。ここでIE8でこれらの問題が発生するのはなぜですか？

は、サイトへのリンクです：あなたは「リソース」ボタンの上に置くと

ボタンホバー
に消える：Test Page

はこれらは私が現在経験しています問題ですドロップダウンメニュー（WordPress Dropdown Menu Widget Pluginを使用）を追加します。サブメニューアンカーのいずれかにカーソルを合わせると、親ボタンが完全に消えます。子ボタンを上に置いたときに、親ボタンを強制的に見えるようにするにはどうすればよいですか？ページを中心にされていない
メインコンテンツ領域（#content_area）
本体容器は、ページを中心にしません。私は幅とマージンが設定されています：0のautoも定義されていますが、コンテンツ領域はまだページをセンタリングしていません。私はこれを解決するために多くの異なるアプローチを試みましたが、まだ運がありません。

また、下部領域（#bottom_area）を中央に配置する必要がありますが、メインコンテンツ領域と同じ戦略を使用していると思います。

どのように私はそれらを中心に得ることができますか？ページの右端に
ページの右側に
ミステリーマージンは、それがどこから来ている、私は理解することはできませんについて10pxのマージンです。どうすれば削除できますか？

出典

2012-03-20 zeckdude

WebDevelopersのための地獄の悪夢 – Rafee

'body'を作成してください。 'body {width：960px;マージン：0 auto; } '。よくこれは中心に整列するために働くかもしれない – Rafee

Thx Rafee！それによって、ページの右側の謎のマージンが取り除かれました。私は間違っているかもしれませんが、そこには1〜2ピクセルのマージンがあるように見えます。 – zeckdude

主な問題は、無効なhtmlがあることです。まず、<link ...>タグを<DOCTYPE ... />の前に<head>に移動します。私はいくつかの問題が解決されたと思います。例えば。 CSS color: inherit; IEがdoctypeを解析できない場合、時々動作しません。

=== === UPDATE

cahnges後のHTMLは次のようにする必要があります：

：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" lang="en-US"> 
<head> 
<meta charset="UTF-8" /> 
<title>Lybeck Murphy, LLP - Lawyers</title> 
<link type='text/css' rel='stylesheet' href='http://lybeckmurphy.com/test/wp-content/themes/mtt/custom_post_type.css' /> 
...

あなたの 'ページのソース' を見る、あなたの最初の変更後に、それは次のようになります

<link type='text/css' rel='stylesheet' href='http://lybeckmurphy.com/test/wp-content/themes/mtt/custom_post_type.css' /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" lang="en-US"> 
<head> 
<meta charset="UTF-8" /> 
<title>Lybeck Murphy, LLP - Lawyers</title> 
...

出典

2012-03-20 07:08:30 scessor

無効な構造があるため、IEはQURIKSモードになります。時々問題はIEではなく、ちょうど悪いコーディング;-) –

はい!,時々私は同意します。私は、クロームのような私たちの現代的なブラウザがそれを修正し、それを有効な構造にすることを学びました。しかし、mozillaのようにページの構造上で動作します。どこのInternet Explorerでも作成者がいつでもそのデフォルトにいつか手がかりを与えます。 – Rafee

doctypeをリンクタグの下に移動しましたが、何かを解決するようだ。私が正しく行っていないことがあれば見てみてください。 – zeckdude

Doctypeが指定されていないことがわかりました。これはおそらくすべての問題を解決するわけではありませんが、IEの最も不満足なCSSの問題のいくつかは、適切なdoctypeを単純に組み込むことで軽減できます。 quirks modeの世界へようこそ。最初のタグとして<ヘッド>タグにタグを次

出典

2012-03-20 07:12:04 Aaron

doctypeが指定されています。これは<！DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">です。私はそれをタグの最後に移動したので、リンクタグの下に移動することをお勧めしましたが、何も解決していないようです。正しいdoctypeを使用していますか？ – zeckdude

興味深い提案。 doctypeに先行するHTMLがあるため、IEではquirksモードがトリガーされます。つまり、古いブラウザとの互換性（つまり、標準に準拠していないか、最新のブラウザと一貫性がある）でページを表示しようとします。あなたのdoctypeはHTML文書の最初の行でなければなりません（PHPのようなサーバー側のコードでも前に置くことができます）。 IE9のF12開発ツールを使用すると、どのレンダリングモードがデフォルトで起動されているかを確認したり、IE8とIE7のレンダリングモードをエミュレートしたりすることができます。 – Aaron

コピー：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

それはあなたの問題を解決する必要があります。

出典

2012-03-20 07:16:05 Chaitanya

私はそれを追加して何も変えていないようです。修正する必要があるのは何ですか？ – zeckdude

このタグを追加すると、IE8レンダリングエンジンはIE7とまったく同じ出力を生成します。したがって、アプリケーションはIE7のように見え、Compatibility Viewボタンは表示されません。 – Chaitanya

IE8でこれらの問題が発生するのはなぜですか？

答えて

関連する問題