مشکل قراردادن عکس درون لینک

iran-TEC

Member
سلام خدمت دوستان گرامی
وقتی من تصویری رو در داخل تک <a> قرار می دم در هنگام کلیک بر روی اون در مرورگر firefox و IE خطوط نقطه چینی ایجاد می شود ولی در مرورگر chorme این خطوط ایجاد نمی شود . می خواستم بدونم آیا راه حلی برای از بین بردن این خطوط وجود دارد یا نه ؟

:rose:
 

پیوست ها

  • untitled.jpg
    untitled.jpg
    7.6 کیلوبایت · بازدیدها: 8

echessdesign

مدیر انجمن طراحی وب
درود بر شما
هیچ کاری نمی توان انجام دارد. این طبع مرورگر است.
آیا خطی آبی می افتد؟
 

iran-TEC

Member
تشکر از تمام دوستان
با راه حل pouya که درست نشد ولی اطراف عکس خطوط نقطه چین آبی می افتد که با کلیک کردن در خارج از تصویر از بین می رود .
 

pouya saadeghi

Active Member
کدی که گذاشتم برای همین کاره.
بستگی داره شما از چه المنتی استفاده کرده باشید. مثلا وقتی داخل تگ a تگ img باشه باید کد رو به این صورت بنویسید:

HTML:
a:active img, img:active{outline: none;}
a:focus img, img:focus{-moz-outline-style: none;}

همین الان تست کردم مشکلی نداشت. اگه بازم مشکل حل نشد لطفا کد HTML رو بذارید تا ببینم. :wink:
 
آخرین ویرایش:

pouya saadeghi

Active Member
برای این که نقطه چین ها هم در IE حذف بشن و هم در فایرفاکس باید یه div در a بگذارید و به کلاس اون یه height اضافه کنید!!
خنده داره ولی این یکی از باگ های IE هست . IE از outline پشتیبانی نمیکنه و مجبور هستیم اینجوری بنویسیم.

به کد زیر دقت کنید:

HTML:
<style type="text/css">

/* to remove firefox outline */
a:focus,a:active{outline-width:0;}

/* to fix ie bug */
.m{height:1px;cursor:pointer;}
</style>



<a href="#"><div>I have Outline Dotted Border In IE</div></a>

<br><br>


<a href="#"><div class="m">I DON'T have Outline Dotted Border In IE</div></a>

کد outline-width:0 که مشکل فایرفاکس رو کلا حل میکنه.

ولی اکسپلورر مشکل داره (نمونه : لینک اولی) که برای این کار یک div داخل لینک میذاریم
و یه height:1px بهش میدیم که دیگه نقطه چین حذف میشه.
با این کار cursor که رو لینک میره دیگه حالت کلیک (علامت انگشت) نداره . برای حل اون مشکل هم cursor:pointer گذاشتم.

و مشکل هم در فایرفاکس و هم در IE حل شد :cool:
 

جدیدترین ارسال ها

بالا