代码之家 › 专栏 › 技术社区 › aloisdg

在注入的span中,Firefox中有空白,但Chrome中没有

firefox-addon cross-browser css html

aloisdg · 技术社区 · 2 月前

在web扩展的上下文中,我正在注入一个 button 在文本节点中。它在Chrome上工作,但在Firefox上,我在注入的文件中有一些奇怪的长空白 span (在按钮和下一个逗号之间)。

我所期待的

一切都很整洁

我真正拥有的是什么

按钮后逗号前长空白

演示

.inject-span {
    display: inline-grid;
    grid-template-columns: max-content fit-content(1ch);
    gap: 0.5ch;
}

.inject-span button {
  padding: 0;
  aspect-ratio: 1;
  height: 100%;
}

<div>John Doe <span class="inject-span"
  ><span>Pablo Picasso</span
  ><button type="button" title="Open information">
    <svg viewBox="0 0 24 24" width="100%" height="auto">
      <path
        style="fill: currentColor; fill-opacity: 1"
        d="m14.05 13.236 6.498 9.606L18.91 24l-6.905-9.47L5.1 24l-1.637-1.158 6.498-9.606L.553 9.22l.615-1.69 9.596 3.463L11.087 0h1.826l.323 10.993 9.596-3.462.615 1.69-9.387 4.015z"
      ></path>
    </svg></button
></span>, Johnny FooBar</div>

我正在尽可能地寻找一个无js的解决方案

1 回复 | 直到 2 月前

Temani Afif 2 月前

aspect-ratio 身高百分比不能很好地结合在一起。如果你想把按钮放在一行文本旁边,最好使用 1lh 作为一个高度

.inject-span {
    display: inline-grid;
    grid-template-columns: max-content fit-content(1ch);
    gap: 0.5ch;
}

.inject-span button {
  padding: 0;
  aspect-ratio: 1;
  height: 1lh;
  font: inherit; /* to make sure you get the same font properties */
}

<div>John Doe <span class="inject-span"
  ><span>Pablo Picasso</span
  ><button type="button" title="Open information">
    <svg viewBox="0 0 24 24" width="100%" height="auto">
      <path
        style="fill: currentColor; fill-opacity: 1"
        d="m14.05 13.236 6.498 9.606L18.91 24l-6.905-9.47L5.1 24l-1.637-1.158 6.498-9.606L.553 9.22l.615-1.69 9.596 3.463L11.087 0h1.826l.323 10.993 9.596-3.462.615 1.69-9.387 4.015z"
      ></path>
    </svg></button
></span>, Johnny FooBar</div>