我在 div loadingMessage
上有关于 svg 的文本,无论打开的窗口有多大或多小,它都希望它显示在中间,它在 Chrome、Firefox 和 IE 中运行良好。但对于 safari,它位于右侧。我想知道为什么以及如何解决这个问题。下面是在 safari 和其他浏览器上运行它的图片。
我的 svg 代码是:
var message = d3.select("#loadingMessage")
.append("svg")
.attr("id", "erase")
.attr("width", 500)
.attr("height", 100)
.append("text")
.text("Why this does not work on safari")
.attr("x", 250)
.attr("y", 55)
.attr("fill", 'royalBlue')
.attr("font-size", 20)
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.attr("font-family", "Sans-serif");
我的 css 定位代码是:
#loadingMessage{
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);}
谢谢。
最佳答案
Safari does not support unprefixed CSS transforms .即使 Mac 版本做了,Windows 版本仍然不会,因为它自 2012 年以来一直没有更新。在 Windows 上的 Safari 中测试基本上是浪费时间,因为没有人使用 Windows 版本,而且它不给您准确了解 Mac Safari 用户将看到的内容。
要解决这个问题,添加一个前缀版本的transform
:
#loadingMessage{
position: absolute;
top: 55%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
关于html - CSS 定位问题仅在 Safari 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32609687/