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

我有以下网页：

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

它基本上是一组文本，以及几个SVG图像。为了获得我想要的效果(六角螺栓应该覆盖在文本上的特定位置(，我在相对定位的容器中使用绝对定位。

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

https://codepen.io/jwir3/pen/ZEzRKyz

关联的 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 中看起来也不错，但是当我使用开发工具检查它时，它会改变盒子的宽度或其他东西，并且它被搞砸了，直到我移位刷新(简单的刷新不会解决问题(。

我相当确定问题在于整个文本/徽标组合的最外层div 是一个灵活的框。我这样做的原因是将其居中在页面上。也许有另一种方法可以在没有这个的情况下实现我想要的结果？

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

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

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

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

.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可能有点矫枉过正。

我认为您需要检查此网站： https://validator.w3.org

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

相关内容

最新更新

热门标签：