css - 如何在 windows 和 mac 上始终将 svg 与包含的文本元素重叠

Question

我遇到了 3 个问题，它们让我抓狂。

1:如果窗口变小，框内的标题标题(最大宽度:1030 像素)应调整大小。此标题的外边框应始终位于周围框的外边框上。

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

最大的问题:3:我在firefox上管理过一次，在windows上用chrome管理过一次，但是!在 Mac 上，chrome 和 safari 看起来不同。 firefox 正在做与 Windows 上相同的事情。所以我一直在寻找另一种方法，但我没有成功。

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

问题 2:具有一定响应性的负边距？

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

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

https://benhuebsch.de/wordpress

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

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

问题 3:也许跨浏览器实现相同的外观是不可能的。

你有什么想法吗？

最好的，E-G

Answer 1

Problem 1: manage responsive Heading scaling on window size -> svg with an text-element inside. solved!? The size of a SVG is obviously different on a mac than on windows.

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

$_SERVER['HTTP_USER_AGENT']

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

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

Problem 2: negative margin with some responsiveness?

我认为 CSS 媒体查询就是您在这里寻找的那个。

Problem 3: Is it possible to manage this on both OS? There is always one browser who is not working like the others and its getting me crazy.

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

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

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