野生动物园忽略了对内联块元素的填充权

发布于 2025-02-05 18:39:29 字数 1803 浏览 1 评论 0原文

我遇到了野生动物园的怪异问题。当内部跨度为内联块时，它似乎忽略了链接的填充。在FF和Chrome中工作，但Safari只是忽略了正确的填充。

我可以在内部的跨度上添加填充物，但是FF和Chrome的右侧空间太多。该结构是由PrimeFaces中的速度组件生成的，因此不容易更改。

这是 ScreenShot Safari和Firefox中问题以进行比较。

有人遇到这个问题吗？提前致谢！

ul{
  width: 200px;
  height: auto;
  list-style: none;
}
li{
  margin-bottom: 1em;
}

a{
  display: inline-block;
  background: red;
  padding: 0 1em;
}

span{
  white-space: nowrap;
}
svg{
  margin-right: 0.5em;
  max-width: 1.25rem;
  vertical-align: bottom; 
}

<ul>
  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text one
      </span></a>
  </li>

  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text
      </span></a>
  </li>
</ul>

原文

I ran into a weird problem with Safari.
It seems to ignore the padding of a link when the span inside is inline-block.
Works in FF and Chrome but Safari just ignores the right padding.

I can add a padding to the span inside but then FF and Chrome have too much space on the right. The structure is generated by the speeddial component in primefaces so not easily changed.

Here's a Screenshot of the problem in Safari and Firefox for comparison.

Anyone ran into this problem before?
Thanks in advance!

ul{
  width: 200px;
  height: auto;
  list-style: none;
}
li{
  margin-bottom: 1em;
}

a{
  display: inline-block;
  background: red;
  padding: 0 1em;
}

span{
  white-space: nowrap;
}
svg{
  margin-right: 0.5em;
  max-width: 1.25rem;
  vertical-align: bottom; 
}

<ul>
  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text one
      </span></a>
  </li>

  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text
      </span></a>
  </li>
</ul>

分享到QQ

分享到微博