IE7および修正されたdiv問題
-
22-07-2019 - |
質問
背景
固定DIVを使用して、クライアント用にかなり複雑なレイアウトを行う必要があります。 IE8、FF3、Chromeではすべて問題ありませんが、IE7はすべての問題を解決します
編集:固定DIVは必須であり、コンテンツDIVのみがスクロールする必要があります(仕様です、申し訳ありません)
HTMLおよびCSSコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="position: fixed; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 680px; float: left; background: white; margin-left: 185px; min-height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
幅IE8、FF3、およびChrome
IE8、FF3、Chrome http://img39.imageshack.us/img39/ 406 / firefoxkpd.jpg
幅IE7
IE7 http://img23.imageshack.us/img23/1315/ie7l。 jpg
注
IE6はFixed
要素をサポートしていないことを知っているので、IE6についてはあまり心配していませんが、修正方法を知っていれば素晴らしいです!
質問
- 問題を修正するためにIE7のバグについて知っておくべきことは何ですか?
- ラッパーに対して相対的にヘッダー列の左側を参照するにはどうすればよいですか
- ヘッダー列が右に移動し、右の列が消えるのはなぜですか?
解決
修正が見つかりました!! 奇妙なことにコンテンツをフローティングしてright
修正します!
クッキーを獲得できますか?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="position: fixed; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
他のヒント
これについて:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="float: left; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 650px; float: left; background: white; left: 185px; min-height: 600px; height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="float: left; top: 10px; width: 90px; left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
IE7、Firefox、Opera、Safari、Chromeで動作します。 IE6とIE8でも機能すると思います。 <!> quot; content <!> quot;の幅を小さくする必要がありました。 (右列+コンテンツ+ヘッダー)<!> lt;ラッパー
古いブラウザでは固定位置は機能しません。要素を互いに浮かせることができます。
本文にもゼロのパディングを指定します。Operaはマージンの代わりにデフォルトのパディングを使用します(実際にはもっと意味があります)。
コードをわかりやすくするために、スタイルシートにスタイルを配置します:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="rightcolumn">
right
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="width: 185px; float: left; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 680px; float: center; background: white; margin-left: 185px; min-height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 95px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
それを行う必要があります!
スクリプトベースのソリューションが受け入れられる場合、ディーン・エドワーズのアップグレードスクリプト。IEの動作を標準が示すようにパッチします。