IE7 تطفو المشاكل الصحيحة

StackOverflow https://stackoverflow.com/questions/1820007

سؤال

والاكواد => 

<!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;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top