Div 在字體大小上的高度增長：嵌套鏈接中的 0px

Question

我有以下代碼。 這是響應式設計的簡化代碼：在特定的屏幕尺寸中，我只想顯示圖標（藍色 - 通過::before ）而不是文本。

當我嘗試通過font-size: 0隱藏郵件地址時（::before 中會有一個圖標） - 標題的高度增加。

當然我可以使用max-height - 但是有更干凈的解決方案嗎？

小提琴： https : //jsfiddle.net/xs2wre4r/

<div class="header"> 

<span class="store-contact-email">
  <a href="mailto:info@example.com">info@example.com</a>
</span>
</div>


<div class="header">

<span class="store-contact-email">
  <a class="hide" href="mailto:info@example.com">info@example.com</a>
</span>
</div>

計算左 .header 框架 = 25px 計算右 .header 框架 = 30px

  .header {
    float: left;
  }
  .header .store-contact-email a:before {
      line-height: 18px;
      vertical-align: -36%;
      padding-right: 5px;
      background-color: blue;
      width: 30px;
      display: inline-block;
  }
  .header .store-contact-email a:before {
      content: "x";
  }

  .store-contact-email {
    border: 1px solid red;
  }
  .store-contact-email a  {
    font-size: 18px;
  }


  .store-contact-email a.hide  {
    font-size: 0px;
  }

Answer 1

您可以設置::before font-size ，因為它繼承了父font-size 。

.header .store-contact-email a:before {
    content: "x";
    font-size: 18px;
}

或者您可以使用display或visibility ，只需避免:before繼承該屬性。

Answer 2

問題在於::before塊的字體大小。
由於第二個字體大小為 0，行高為 18，因此它將垂直放置在基線周圍，上方 9px 和下方 9px。 第一個（使用正常字體大小）將正常定位（取決於確切的字體），例如，上方 14px 和下方 4px。

（您還對::before進行了vertical-align ，但這不會改變情況；它將::before塊向下移動 6.48 像素。）

因此，由於第二個比第一個低 5px，邊界框的底部將被下推 5px。

為了顯示，

 span { font-size: 18px; border: 1px solid red; background: rgba(255, 255, 0, .4); } span::before { line-height: 18px; vertical-align: -36%; border: 1px solid blue; background: rgba(0, 255, 255, .4); width: 30px; display: inline-block; content: "x"; } span.hide { font-size: 0; }

 <span>visible</span> <span class="hide">invisible</span>

解決方案：不要使用 font-size:0 技巧。

Answer 3

用跨度包裹文本並隱藏跨度

    <div class="header">

  <span class="store-contact-email">
    <a class="hide" href="mailto:info@example.com"><span>info@example.com</span></a>
  </span>
</div>

.store-contact-email a.hide span  {
  display:none;
}

Answer 4

最好是：-

(1) 將文本info@example.com在另一個span ，它會在斷點下display:none ； 或者

(2) 將圖標放在.store-contact-email:before而不是.store-contact-email a:before 。

---

原因是瀏覽器通常會出於可訪問性目的強制使用最小字體大小。