مشکل در align="left" در تگ img در Internet explorer

Question

با ست کردن align="left" در تگ img تنها در مرور گر IE ، تگ div پدر این تگ دفرم می شود. چگونه می توان این مشکل را مرتفع نمود؟

<img border="0" src="images\Cancel.gif" alt="بستن" onclick="hideSearchPopUp('<%=id%>');" align="left"/>

همانگونه که مشاهده میکنید ارتفاع div افزایش یافته و عکس به پایین چپ منتقل شده است.

Answer 1

مشکل از اینجا بود که قبل از دادن width به div پدر، height به آن اعمال نمی شد، قبلا فقط height را به تنهایی ست کرده بودم.

شاید بتوان این را باگ IE نام برد! چون تنها در این مرورگر این مشکل را داشتم.

 

<div id="banner_div" style="overflow: auto; height: 16px; width: 120px;">
            <strong style=" float:right;">
                جستجو
            </strong>
        <img border="0" src="images\Cancel.gif" alt="بستن" onclick="hideSearchPopUp('to1');" align="left">
        <img border="0" src="images\loading.gif" alt="در حال جستجو" style="display:none;  " align="left" name="loading">
    </div>

 

Answer 2

1- اول باید این نکته رو بگم که Text-align  برای تگ img بی معنی است ، چون  زمانی ازین دستور استفاده میشود که بخواهیم محتوای یک تگ را align کنیم و این در حالیست که محتوای تگ img یک تصویر است.

2- برای اینکار باید از float استفاده کرد. و چون میخواهیم به سمت چپ float  شود ابتدا باید تگ img را بنویسیم  و بعد بقیه محتوای تگ پدر را.

3- برای بهم نریختن محتوای پدر دو راه وجود دارد :

a- استفاده از height برای تگ پدر :---------------------

.parent{height:40px;}
.parent  img {float:left ; width:16px ; height:16px; border: none; }
<div class="parent">
<img src="images\Cancel.gif" alt="بستن" onclick="hideSearchPopUp('<%=id%>');"/>
<div >everythings</div>
</div>

b- استفاده از clearer :----------------------------------

.clearer{clear: both;}
.parent  img {float:left ; width:16px ; height:16px; border: none; }
<div class="parent">
<img src="images\Cancel.gif" alt="بستن" onclick="hideSearchPopUp('<%=id%>');"/>
<div >everythings</div>
<div class="clearer"></div>
</div>

Comments

align یک اتریبیوت مخصوص img است و معنی متفاوتی از direction و text align دارد.

---

رفتار استایل float:left نیز در این مورد مانند اتریبیوت align است، یعنی باعث دفرم شدن فرم می شود.