如何在 windows 和 mac 上一致地重叠包含文本元素的 svg

Question

我遇到了 3 个问题，它们让我发疯。

1：如果窗口变小，框内的标题标题（最大宽度：1030px）应调整大小。此标题的外边框应始终位于周围框的外边框上。

2：下面的菜单应该与标题重叠（视觉上切掉）一点（margin-top：-1.5% 或类似 30px）。 问题：这仅在窗口小于 900px 宽之前有效。 低于此值，菜单似乎在所有浏览器上重叠很多。

最大的问题： 3：我在windows上的firefox和chrome上管理过一次，但是！在 mac chrome 和 safari 上看起来不同。 firefox 在 windows 上做同样的事情。 所以我在寻找另一种方式，但我没有成功。

问题 1：管理窗口大小的响应式标题缩放 -> svg，其中包含文本元素。解决了！？ SVG 的大小在 Mac 上与在 Windows 上明显不同。

问题 2：负边距并具有一定的响应能力？

问题 3：是否可以在两个操作系统上进行管理？ 总是有一个浏览器不像其他浏览器那样工作，这让我抓狂。

我在方框中添加了明亮的背景颜色，以便更好地感受那里发生的事情。请访问：

https://benhuebsch.de/wordpress

问题 1：在 Safari 上，svg 文本在两个操作系统上的所有浏览器上都比 1030 像素大一点。

问题 2：我认为我的版本是错误的方式，但我不知道如何管理它。

问题 3：也许不可能在不同浏览器中实现相同的外观。

你有什么想法吗？

最好， E-G

Answer 1

问题 1：根据窗口大小管理响应式标题缩放 -> 带有文本元素的 svg 里面。解决了！？ SVG 的大小在 Mac 上与在 Windows 上明显不同。

如果是你需要知道的浏览器，可以在PHP中使用一个变量

$_SERVER['HTTP_USER_AGENT']

您还可以使用 get_browser() 函数来检查客户端浏览器的详细信息，例如它的版本

$browser = get_browser(null, true);
echo $browser['version']; // will echo the client's browser version

问题 2：负边距并具有一定的响应能力？

我认为 CSS 媒体查询是您在这里寻找的。​​p>

问题 3：是否可以在两个操作系统上进行管理？总会有一个浏览器 不像其他人那样工作，这让我抓狂。

是的。只需比较客户端的浏览器版本即可。

$browser = get_browser(null, true);
if($browser['version'] <= 1.0){
    // do something
}

如果您确定不是浏览器版本，那么您最好从thread 了解客户端的操作系统。