ฉันจะลบโครงร่างรอบ ๆ ภาพไฮเปอร์ลิงก์ได้อย่างไร

เมื่อเราใช้การเปลี่ยนข้อความโดยใช้ CSS text-indent:-9999pxและให้ลบทดสอบเยื้องคือ จากนั้นเมื่อเราคลิกที่ลิงค์นั้นเส้นประจะปรากฏดังในภาพตัวอย่างด้านล่าง ทางออกสำหรับสิ่งนี้คืออะไร?

สำหรับ Remove outline สำหรับ anchor tag

a {outline : none;}

ลบโครงร่างจากลิงก์รูปภาพ

a img {outline : none;}

ลบเส้นขอบออกจากลิงก์รูปภาพ

img {border : 0;}

คุณสามารถใช้คุณสมบัติ CSS "outline" และค่า "none" บนองค์ประกอบจุดยึด

a {
outline: none;
}

หวังว่าจะช่วยได้

สำหรับ Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

ที่มา: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

โปรดทราบว่ารูปแบบการโฟกัสนั้นมีเหตุผล: หากคุณตัดสินใจที่จะลบออกผู้คนที่นำทางผ่านแป้นพิมพ์จะไม่รู้ว่ามีอะไรอยู่ในโฟกัสอีกต่อไปดังนั้นคุณจึงทำร้ายการเข้าถึงเว็บไซต์ของคุณ

(การเก็บไว้ในตำแหน่งยังช่วยให้ผู้ใช้ระดับสูงที่ไม่ชอบใช้เมาส์)

มีเอฟเฟกต์เส้นขอบเหมือนกันในFirefoxและInternet Explorer (IE)ซึ่งจะปรากฏให้เห็นเมื่อคุณคลิกที่ลิงค์

รหัสนี้จะแก้ไขเฉพาะ IE:

a:active { outline: none; }.

และสิ่งนี้จะแก้ไขทั้ง Firefox และ IE :

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

ควรเพิ่มโค้ดสุดท้ายลงในสไตล์ชีตของคุณหากคุณต้องการลบเส้นขอบลิงก์ออกจากไซต์ของคุณ

รวมรหัสนี้ไว้ในสไตล์ชีตของคุณ

img {border : 0;}

a img {outline : none;}

ฉันหวังว่านี่จะเป็นประโยชน์สำหรับคุณบางคนสามารถใช้เพื่อลบโครงร่างจากลิงก์รูปภาพและแฟลชและจาก MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

โค้ดด้านล่างนี้สามารถซ่อนขอบรูปภาพได้:

    img {
    border: 0;
    }

หากคุณต้องการรองรับ Firefox 3.6.8 แต่ไม่ใช่ Firefox 4 ... การคลิกที่ประเภทอินพุต = รูปภาพสามารถสร้างเส้นประได้เช่นกันหากต้องการลบออกใน Firefox เวอร์ชันเก่าสิ่งต่อไปนี้จะทำเคล็ดลับ:

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9 ไม่อนุญาตให้ลบเส้นประรอบ ๆ ลิงก์ในบางกรณีเว้นแต่คุณจะรวมเมตาแท็กนี้ระหว่างและในหน้าของคุณ:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

นี่เป็นเวอร์ชันล่าสุดที่ใช้งานได้บน Google Chrome

:link:focus, :visited:focus {outline: none;}

-moz-user-focus: ignore; ในเบราว์เซอร์ที่ใช้ Gecko (คุณอาจต้องใช้! สำคัญขึ้นอยู่กับว่าจะใช้อย่างไร)

ใช้เช่นนี้สำหรับ HTML 4.01

<img src="image.gif" border="0">

คุณสามารถใส่overflow:hiddenลงในคุณสมบัติที่มีการเยื้องข้อความและเส้นประที่ทอดยาวออกจากหน้าจะหายไป

ฉันเคยเห็นสองสามโพสต์เกี่ยวกับการลบโครงร่างทั้งหมดด้วยกัน โปรดใช้ความระมัดระวังในการดำเนินการนี้เนื่องจากอาจทำให้การเข้าถึงไซต์ลดลง

a:active { outline: none; }

โดยส่วนตัวฉันจะใช้แอตทริบิวต์นี้เท่านั้นราวกับว่า:hoverแอตทริบิวต์มีคุณสมบัติ css เหมือนกันมันจะป้องกันไม่ให้เค้าโครงแสดงสำหรับผู้ที่ใช้แป้นพิมพ์สำหรับการนำทาง

หวังว่านี่จะช่วยแก้ปัญหาของคุณได้

ในการลบลิงก์ Dotted Outline href คุณสามารถเขียนในไฟล์ css ของคุณ:

a {
   outline: 0;
}

ฉันจะพนันได้เลยว่าผู้ใช้ส่วนใหญ่ไม่ใช่ผู้ใช้ประเภทที่ใช้แป้นพิมพ์เป็นตัวควบคุมการนำทาง เป็นที่ยอมรับหรือไม่ที่จะรบกวนผู้ใช้ส่วนใหญ่ของคุณสำหรับกลุ่มเล็ก ๆ ที่ชอบใช้การนำทางด้วยแป้นพิมพ์ คำตอบสั้น ๆ - ขึ้นอยู่กับว่าผู้ใช้ของคุณคือใคร

นอกจากนี้ฉันไม่เห็นประสบการณ์นี้ในลักษณะเดียวกันใน Firefox และ Safari ดังนั้นอาร์กิวเมนต์นี้ดูเหมือนจะเป็นสำหรับ IE เป็นส่วนใหญ่ ทุกอย่างขึ้นอยู่กับฐานผู้ใช้ของคุณและระดับความรู้ - วิธีที่พวกเขาใช้ไซต์

หากคุณต้องการทราบว่าคุณอยู่ที่ไหนและเป็นผู้ใช้แป้นพิมพ์คุณสามารถดูที่แถบสถานะได้ตลอดเวลาเมื่อคุณป้อนข้อมูลผ่านไซต์

สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

a img {border:none;}

รูปภาพใด ๆ ที่มีลิงก์จะมีเส้นขอบรอบ ๆ รูปภาพเพื่อช่วยระบุว่าเป็นลิงก์ที่มีเบราว์เซอร์รุ่นเก่า การเพิ่ม border = "0" ลงในแท็ก IMG HTML ของคุณจะป้องกันไม่ให้รูปภาพนั้นมีเส้นขอบรอบรูปภาพ

อย่างไรก็ตามการเพิ่ม border = "0" ให้กับทุกภาพไม่เพียง แต่จะเสียเวลา แต่ยังช่วยเพิ่มขนาดไฟล์และเวลาในการดาวน์โหลด หากคุณไม่ต้องการให้รูปภาพของคุณมีเส้นขอบให้สร้างกฎ CSS หรือไฟล์ CSS ที่มีโค้ดด้านล่างนี้

img {สไตล์เส้นขอบ: ไม่มี; }

ฉันไม่แน่ใจว่านี่ยังคงเป็นปัญหาสำหรับบุคคลนี้หรือไม่ แต่ฉันรู้ว่ามันอาจเป็นความเจ็บปวดสำหรับหลาย ๆ คนโดยทั่วไป จริงอยู่ที่วิธีแก้ปัญหาข้างต้นจะใช้งานได้ในบางกรณี แต่ถ้าคุณใช้ CMS เช่น WordPress และโครงร่างถูกสร้างขึ้นโดยปลั๊กอินหรือธีมคุณมักจะไม่ได้รับการแก้ไขปัญหานี้ขึ้นอยู่กับ คุณเพิ่ม CSS อย่างไร

ฉันขอแนะนำให้มี StyleSheet แยกต่างหาก (ตัวอย่างเช่นใช้ปลั๊กอิน' Lazyest StyleSheet ') และป้อน CSS ต่อไปนี้ภายในเพื่อแทนที่รูปแบบการบังคับปลั๊กอิน (หรือธีม) ที่มีอยู่:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

การเพิ่ม ' ! important ' ลงในกฎเฉพาะจะทำให้สิ่งนี้มีความสำคัญในการสร้างแม้ว่ากฎนั้นอาจจะอยู่ที่อื่นก็ตาม (ไม่ว่าจะเป็นในปลั๊กอินธีม ฯลฯ )

ซึ่งจะช่วยประหยัดเวลาในการพัฒนา แน่นอนว่าคุณสามารถขุดหาแหล่งที่มาดั้งเดิมได้ แต่เมื่อคุณทำงานในหลาย ๆ โปรเจ็กต์หรือจำเป็นต้องทำการอัปเดต (ซึ่งสามารถลบล้างการเปลี่ยนแปลงของคุณได้ [ ไม่แนะนำ! ]) หรือเพิ่มปลั๊กอินหรือธีมใหม่นี่เป็นวิธีที่ดีที่สุด ขอความช่วยเหลือเพื่อประหยัดเวลา

หวังว่านี่จะช่วย ... สันติภาพ!

หากวิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับทุกคน ลองดูเช่นกัน

a {
 box-shadow: none;
}

ใช่เราสามารถใช้ได้ CSS รีเซ็ตเป็นa {outline:none}และด้วย

a:focus, a:active {outline:none} สำหรับแนวทางปฏิบัติที่ดีที่สุดในการรีเซ็ต CSS ทางออกที่ดีที่สุดคือการใช้ทั่วไป:focus{outline:none}หากคุณยังมีตัวเลือกที่ดีที่สุดโปรดแบ่งปัน