IE7 تطفو المشاكل الصحيحة
-
10-07-2019 - |
سؤال
والاكواد =>
<!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">
<head>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
<a href="#">foo</a>
<a href="#"style="border-color: blue; float: right;">bar</a>
</div>
something
</body>
</html>
وحصلت مشاكل مع IE7 (وليس هناك حاجة إلى دعم IE6)
في IE7 المقدمة أتش تي أم أل يبدو مثل هذا =>
وأنا في حاجة إليها لتبدو مثل هذا (يعمل على الكروم / IE8 في الوقت الحاضر) =>
وماذا يجب أن تتغير؟ :)
المحلول
وتحتاج إلى تعويم كلا العنصرين ومسحها.
<!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">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
وأو ببساطة عنصر عائم أمام العنصر الطبيعي مثل هذا:
<!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">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
شرح موجز:
والعفو لغتي الإنجليزية والرسم، ولكن هنا بإيجاز كيف تطفو وتطهير يعمل في متصفح عبر:
ويمكن طرح أحد العناصر اليسار أو اليمين. عندما يكون لديك عنصر عائم، عنصر لا يدفع "طبيعية" محتوى أسفل. ترى لماذا -
وتعويم واضحة:
المجموعات: برتقالي / تعويم الحق، والأزرق / تعويم اليسار، رمادي خطوط / واضح المفرق، أحمر مصحح / الحدود م>
في هذه الحالة، لديك 2 عناصر النص سطر واحد - واحد تعويم اليسار، والآخر الحق تعويم. عندما العائمة، وانها لن تدفع محتويات أسفل أخذ الملقب الفضاء. وبالتالي إذا كنت لا تستخدم clear:both
في خطوط رمادية، فإن محتويات تحت كومة صعودا بين عناصر العائمة 2 وبالتالي قد لا تكون ما تريد.
عند استخدام clear:both
أدناه العوامات، ومحتوى أقل من العوامات وسيتم دفع بقدر ما أيهما عنصر تعويم هو من أعلى ارتفاع. هذا هو مبين في القسم 2ND و 3rd الرسم البياني ل.
وتعويم فقط:
المجموعات: برتقالي / تعويم الحق، والأزرق / محتوى عادي، رمادي خطوط / الخط الذي divded مع المقبلة، أحمر مصحح / الحدود م>
ومحتوى العادي الأزرق هو بالفعل text-align: left;
الافتراضية. وبالتالي فإنه يتم توجيه اليسار. كنت في حاجة إلى تعويم ليكون في مقدمة المحتوى العادي لأنك تخبر المتصفح لتطفو من هذا الخط.
ويجب أن تجربة ظروف مختلفة لمعرفة تأثيرها: وضع تعويم أمام، خلف، تطفو الحق الأيسر، واضحة على حد سواء، والحق واضح وتركت
.نصائح أخرى
ومفيدة دائما لجميع IE-تعويم-كومبو: إعطاء كل تعويم عنصر من display: inline;
وحاول واضحة بعد الإصلاح:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}