كيفية إصلاح IE7 مجموعة عائمة واضحة
-
20-09-2019 - |
سؤال
لدي فئة field_wrapper التي تحتوي على 3 divs sub field_label و field_input و field_error
أحتاج إلى وضع field_label و field_input جنبًا إلى جنب و field_error أسفل الأولين.
يرجى الاطلاع على رمز CSS أدناه لمعرفة كيف حققت هذا ، مشكلتي هي أنها لا تعمل في IE7. مسح كل من المطبق على field_error لا يعمل.
حتى بعد Googling لفترة طويلة ، لا يمكنني العثور على طريقة مناسبة لإصلاح هذا دون إضافة علامة HTML. يرجى تقديم المشورة إلى نصيحة CSS أو أي طريقة أخرى لتجنب رمز الترميز الإضافي
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
المحلول
إذا كنت لا ترغب في إزالة عطف اليسار. يمكنك استخدام رمز الغلاف هذا
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
إنه يعمل بالنسبة لي في كل مرة (IE6 أيضًا)
تحديث:
نظرت إلى هذا مرة أخرى ، وقمت بتغيير الترميز قليلاً ، مما جعلها صالحة XHTML. فقط ضع الفصل على علامة P ، لا تحتاج إلى Div إضافي.
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
نصائح أخرى
قم بإزالة التعويم: مباشرة من "field_error"
دعني أخبركم شيئًا واحدًا أولاً. إذا كان لديك محتوى عائم في حاوية ، فلن تحتوي الحاوية أبدًا حتى لا تحتوي على خاصية تدفق الحاوية لإخفاءها أو تجعلها تطفو. مثل
.field_wrapper
{
clear:both;
overflow:hidden;
}
الآن يحتوي على جميع العناصر العائمة. الآن للخطأ الخاص بك Div لأنك تطفو عناصر لك إلى اليسار ، لذلك أوضح: اليسار فقط وسيعمل.
شكرًا