绝对定位 div 中的 SVG 图像在 Firefox 上与 Chrome 不同

Question

我有以下网页：

http://designsystem.foamfactory.io/current/components/preview/main.html

它基本上是一组文本，以及一些 SVG 图像。为了达到我想要的效果（六角螺栓应该覆盖在文本的特定位置），我在相对定位的容器内使用绝对定位。

实际的 HTML 代码和 CSS 相当简单，在此代码笔中进行了概述：

关联的 HTML 是：

<div class="lockup">
        <img class="lockup-logo logo-medium" src="http://designsystem.foamfactory.io/current/dist/assets/logos/Logo.svg" />
        <div class="textmark textmark-medium">
            <div id="hex-bolt-f-top">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-f-bottom">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-y-middle">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-y-bottom">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div class="textmark-text">Foamfactor<span class="last-letter">y</span></div>
        </div>
        <div class="empty"></div>
    </div>

和CSS：

    .lockup {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }


  .lockup .empty {
    -ms-flex-positive: 4;
    flex-grow: 4;
  }


  .lockup-logo {
    display: inline;
  }


  .textmark {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    margin-left: .2em;
  }


  .textmark .textmark-text {
    display: block;
    color: black !important;
    box-sizing: border-box;
    font-family: "Staatliches";
    line-height: 1.0;
    letter-spacing: -.04em;
  }


  .textmark.textmark-large {
    font-size: 200pt;
  }


  .textmark.textmark-large .textmark-text::first-letter,

  .textmark.textmark-large .textmark-text .last-letter {
    font-size: 300pt;
  }


  .textmark.textmark-large .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-medium {
    font-size: 80pt;
  }


  .textmark.textmark-medium .textmark-text::first-letter,

  .textmark.textmark-medium .textmark-text .last-letter {
    font-size: 120pt;
  }


  .textmark.textmark-medium .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-small {
    font-size: 40pt;
  }


  .textmark.textmark-small .textmark-text::first-letter,

  .textmark.textmark-small .textmark-text .last-letter {
    font-size: 60pt;
  }


  .textmark.textmark-small .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-tiny {
    font-size: 24pt;
  }


  .textmark.textmark-tiny .textmark-text::first-letter,

  .textmark.textmark-tiny .textmark-text .last-letter {
    font-size: 36pt;
  }


  .textmark.textmark-tiny .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark #hex-bolt-f-top img,

  .textmark #hex-bolt-f-bottom img,

  .textmark #hex-bolt-y-bottom img,

  .textmark #hex-bolt-y-middle img {
    width: .08em;
  }


  .textmark #hex-bolt-f-top {
    position: absolute;
    top: -.6em;
    left: .1em;
  }


  .textmark #hex-bolt-f-bottom {
    position: absolute;
    bottom: .1em;
    left: .1em;
  }


  .textmark #hex-bolt-y-bottom {
    position: absolute;
    bottom: .1em;
    right: .2282em;
  }


  .textmark #hex-bolt-y-middle {
    position: absolute;
    top: -.1em;
    right: .2282em;
  }

在 Chrome 中，这总是符合我的预期。在 Firefox 中（我正在使用 Nightly，但我也在最新版本上尝试过），但是，div（"Y"）最右边的六角螺栓太远了正确的。更奇怪的是，大多数时候它在 Firefox 中看起来也不错，但是当我使用开发工具检查它时，它会改变框的宽度或其他东西，并且在我 shift-refresh 之前它会搞砸（一个简单的刷新不会'无法解决问题）。

我相当确定问题在于整个 text/logo 组合的最外层 div 是一个灵活的盒子。我这样做的原因是将它放在页面的中心。没有这个，也许还有另一种方法可以达到我想要的结果？

更重要的是，我不清楚为什么两种浏览器之间的行为不同。我是否遇到了规范定义不明确的地方？

Answer 1

这解决了问题，但您需要更正第一个字母

.textmark .textmark-text {
    display: inline;
}

Answer 2

我认为最简单的方法是将其居中：

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这样你就只有这样的东西：

<body class="frontmatter index">
   <div class="centered">
      <div>
         <div class="lockup">
            <img class="lockup-logo logo-medium" src="../../dist/assets/logos/Logo.svg">
            <div class="textmark textmark-medium">
                <div id="hex-bolt-f-top">
                    <img src="../../dist/assets/misc/Hex Bolt.svg">
                </div>
                <div id="hex-bolt-f-bottom">
                    <img src="../../dist/assets/misc/Hex Bolt.svg">
                </div>
                <div id="hex-bolt-y-middle">
                    <img src="../../dist/assets/misc/Hex Bolt.svg">
                </div>
                <div id="hex-bolt-y-bottom">
                    <img src="../../dist/assets/misc/Hex Bolt.svg">
                </div>
                <div class="textmark-text">Foamfactor<span class="last-letter">y</span></div>
                </div>
                <div class="empty"></div>
            </div>
        </div>
        <h2>An elegant brewery management system for a more civilized age</h2>
     </div>

....

</body>

在我看来，Flexbox 可能有点矫枉过正。

Answer 3

我想你需要看看这个网站： https://validator.w3.org

然后在那里扫描您的网站，当我检查您的网站中缺少许多属性和标签时，该网站会告诉您在哪里修复您的网站结构。您可能认为这不是导致您的网站结构错误的问题。因此，请访问该网站并修复您的网络结构中遗留的错误。

绝对定位 div 中的 SVG 图像在 Firefox 上与 Chrome 不同

SVG image within an absolutely positioned div is different on Firefox than Chrome

html

css

text

flexbox

graphical-logo