ลิงก์ภายในรายการมีความสูงมากกว่าองค์ประกอบรายการเกิดอะไรขึ้น?

Aug 19 2020

ฉันมีnavรายชื่อลิงค์ รายการมีไฟล์line-height: 1em. อย่างไรก็ตามลิงก์มีความสูงมากกว่า1emและทับซ้อนกับรายการก่อนหน้าทำให้คลิกรายการได้ยาก

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  font-size: 50px;
  line-height: 1em;
}

nav li {
  background-color: green;
}

nav a {
  background-color: pink;
}
<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

สิ่งนี้สามารถมองเห็นได้ง่ายขึ้นถ้าฉันเพิ่มmargin-bottomไฟล์nav li. ลิงก์ (สีชมพู) มีความสูงมากกว่าความสูงบรรทัดของรายการ (สีเขียว):

ฉันจะทำให้ลิงก์มีความสูงเท่ากับรายการได้อย่างไร เพื่อให้ไม่มีการทับซ้อน?

บันทึก. ไม่มีช่องว่างภายในลิงก์ดังนั้นฉันจึงไม่รู้ว่าทำไมจึงมีขนาดใหญ่กว่า มันไม่ได้สร้างความแตกต่างใด ๆ ถ้าฉันเพิ่มheight:1emในไฟล์nav a. ฉันได้ลอง display: inline-block - ซึ่งทำให้พื้นหลังสีชมพูมีความสูงเท่ากับพื้นหลังสีเขียว แต่ลิงก์ยังคงสามารถคลิกได้ที่ด้านบนและด้านล่างของพื้นหลังสีชมพู! พื้นที่ที่คลิกได้ไม่ได้ จำกัด อยู่ที่พื้นหลังสีชมพู

ข้อมูลใหม่

ลิงก์มีความสูงมากกว่าไฟล์font-size.

ขนาดของลิงก์ไม่ได้รับอิทธิพลจากไฟล์line-height.

ตัวอย่างเช่นบรรทัดข้อความที่font-size: 50pxมีความสูง 50px แต่ลิงก์ภายในบรรทัดข้อความมีความสูง 68px (ไม่มีช่องว่างภายในหรือขอบบนลิงก์)

ฉันคิดว่าพื้นที่ที่คลิกได้รอบ ๆ ลิงก์จะต้องคำนึงถึงผู้ขึ้นและผู้สืบทอดทั้งหมดของแบบอักษรด้วย และนี่คือสาเหตุที่มีความสูงมากกว่าขนาดตัวอักษร

ดังนั้นหากตั้งค่าความสูงของบรรทัดเป็น 1em ลิงก์จะทับซ้อนกัน การใช้display: inline-blockแสดงพื้นหลังสีชมพูว่ามีความสูงเท่ากับพื้นหลังสีเขียว แต่ (แปลกดี) พื้นที่ที่คลิกได้ยังคงมีขนาดใหญ่กว่าความสูงของพื้นหลังสีชมพู 50px

เว้นแต่จะมีวิธี จำกัด ความสูงของลิงก์กับความสูงของขนาดฟอนต์ฉันจะต้องเพิ่มความสูงของบรรทัดเพื่อรองรับความแตกต่างนี้

JS Fiddle นี้แสดงให้เห็นว่าลิงก์มีขนาดใหญ่กว่าขนาดตัวอักษรอย่างไร: https://jsfiddle.net/utqafz61/

... ดังนั้นหากความสูงของบรรทัดเท่ากับขนาดตัวอักษร (1em) ลิงก์จะทับซ้อนกันทำให้คลิกลิงก์ที่ถูกต้องได้ยาก ฉันสังเกตเห็นสิ่งนี้เป็นครั้งแรกในเว็บไซต์นี้:https://www.hassellstudio.comบนเมนูการนำทางลิงก์จะทับซ้อนกัน ตัวชี้เมาส์สามารถอยู่ในลิงค์เดียว แต่ลิงก์ด้านล่างนี้จะถูกไฮไลต์!

คำตอบ

UmutambyiGad Aug 19 2020 at 19:53

สิ่งที่แปลกที่คุณกำลังทำคือการตั้งค่าfont-sizeของnavซึ่งเป็นแม่ของul liการ10remที่ทำให้พวกเขาที่ใหญ่กว่าและยังline-heightแตกต่างจากที่เกิดขึ้นจริงheightเพียง se ที่นี่line-height

ตัวอย่าง

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  /* font-size: 10rem;*/
}

nav li {
  margin: 10px;
  background-color: green;
}

nav a {
  background-color: pink;
}
<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

JHeth Aug 19 2020 at 19:57

เพียงเพิ่มองค์ประกอบdisplay: inline-blockของคุณa

แท็ก Anchor จะถูกแทรกในสไตล์ชีตของตัวแทนผู้ใช้ซึ่งเป็นสาเหตุที่ทำให้คุณล้น

FluffyKitten Aug 19 2020 at 19:54

ปัญหาเกิดจากline-heightใน nav ของคุณมันไม่ได้ให้ช่องว่างระหว่างบรรทัด () line-height: 1em จัดสรรให้เหมือนกับขนาดตัวอักษร (50px) เท่านั้นจึงไม่มีที่ว่างสำหรับช่องว่างเริ่มต้นรอบตัวอักษร) . คุณสามารถทำให้line-heightใหญ่ขึ้นได้ (1.1em จะทำงานร่วมกับโค้ดของคุณด้านบน):

nav { line-height: 1.1em; } 

หรือเพียงแค่ลบออกทั้งหมดเพื่อให้ใช้ค่าเริ่มต้น

อัพเดท:

หากคุณไม่สามารถเปลี่ยนความสูงของเส้นจาก 1em ได้มีปัญหาพื้นฐาน 2 ประการที่ทำให้เกิดปัญหาในการดำเนินการนี้:

  1. a แท็กจะอยู่ในบรรทัดตามค่าเริ่มต้นซึ่งทำให้ยากต่อการทำงานกับระยะขอบและช่องว่าง ฯลฯ
  2. แบบอักษรส่วนใหญ่จะมีพื้นที่พิเศษบนและด้านล่างเพื่อให้ ascenders descenders และไม่ได้สัมผัส - นี้จะลงไปร่ายมนตร์อักษรของตัวเอง แบบอักษรบางแบบ "แย่กว่า" แบบอื่น

คุณสามารถบังคับไม่ให้ลิงก์ล้นออกไปภายนอกได้liโดยใช้สิ่งต่อไปนี้และจะป้องกันไม่ให้เอฟเฟกต์ที่คุณเห็นว่าเมาส์ดูเหมือนอยู่บนลิงค์เดียว แต่เปิดใช้งานอีกลิงค์หนึ่งจริงๆ:

nav li {
    background-color: green;
    overflow: hidden;        /* this will crop off anything outside the element */
}

อย่างไรก็ตามขึ้นอยู่กับแบบอักษรสิ่งนี้สามารถครอบตัดส่วนเล็ก ๆ ออกจากส่วนย่อยของตัวอักษร

ตัวอย่างข้อมูลการทำงาน:

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a { 
    background-color: pink;  
}

nav li:hover a{ 
    background-color: yellow;  
}
<nav>
    <ul>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="ethical-design.html">Ethics</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

ไม่มีวิธีง่ายๆในการแก้ไขปัญหานี้โดยไม่ต้องเปลี่ยนความสูงของเส้น (แม้แต่เล็กน้อย) แต่ฉันลองแฮ็กต่างๆเพื่อดูว่าเราสามารถย้ายข้อความลิงก์ขึ้นสองสามพิกเซลได้หรือไม่โดยไม่ต้องย้ายลิงก์ที่ใช้งานอยู่

ถ้ามันเป็นไปได้สำหรับคุณที่จะทำให้การaที่จะdisplay: blockแล้วนี้ดูเหมือนว่าจะทำงาน:

nav li {
    background-color: green;
    overflow: hidden;
}
nav a {
  background-color: pink;
  display: block;
  /* tweak the values below to suit */
  margin-top: -2px;
  padding-bottom: 2px;
}

วิธีแก้ไข: ใช้ overflow: hidden, negative margin และ padding เป็นวิธีแก้ปัญหานี้

ระยะขอบเชิงลบจะเลื่อนขึ้นไปที่ด้านบนสุดของลิงก์ (ซึ่งมีช่องว่างพิเศษ) และช่องว่างภายในจะเพิ่มช่องว่างเล็กน้อยสำหรับการเลื่อนลง òverflow:hiddenในliพืชปิดพิเศษ

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

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a {
  background-color: pink;
  display: block;
  margin-top: -20px;
  padding-bottom: 20px;
  border:1px solid blue;
}

nav li:hover a{ 
    background-color: yellow;  
}
<nav>
    <ul>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="ethical-design.html">Ethics</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

ดีที่สุดเท่าที่จะทำได้หวังว่าหนึ่งในตัวเลือกเหล่านั้นจะเหมาะสม!