IE7 و ثابت divs المشكلة
https://stackoverflow.com/questions/1228536
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
الخلفية
أنا بحاجة إلى القيام معقدة تخطيط للعميل ، وذلك باستخدام ثابت DIV.كل شيء على ما يرام في IE8 ، FF3 والكروم ، ولكن IE7 mangles كل شيء
تحرير: الثابتة DIVs يجب أن يكون فقط المحتوى 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 و كروم
IE8 ، FF3 و كروم http://img39.imageshack.us/img39/406/firefoxkpd.jpg
عرض IE7
IE7 http://img23.imageshack.us/img23/1315/ie7l.jpg
ملاحظات
أنا لست قلقا جدا حول IE6 لأنني أعرف أنه لا يدعم Fixed العناصر, ولكن إذا كنت تعرف كيفية إصلاح ذلك عظيم!
الأسئلة
- ماذا يجب أن تعرف عن 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, فايرفوكس, أوبرا, سفاري و كروم.أعتقد أنه سوف يعمل في IE6 و IE8 أيضا.لدي للحد من عرض "المحتوى" لأن (rightcolumn+المحتوى+رأس) < المجمع
موقف ثابت لا تعمل في المتصفحات القديمة.يمكنك تعويم العناصر بجانب بعضها البعض.
تحديد صفر الحشو للجسم أيضا ، الأوبرا يستخدم الافتراضي الحشو بدلا من الهامش (والتي في الواقع أكثر منطقية).
أنا وضعت الأساليب في ورقة نمط لجعل رمز الأنظف:
<!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>
ينبغي أن تفعل ذلك!
إذا كان السيناريو القائم على حلول مقبولة ، ثم لدي بعض النجاح مع ثابت divs (ليس بالضرورة استخدام تخطيط لديك) باستخدام دين إدواردز' ترقية البرامج النصية والتي التصحيح أي سلوكيات أن تكون أكثر مثل معايير الإشارة.
لا تنتمي إلى StackOverflow
