我在div loadingMessage
上有关于svg的文本,希望它出现在中间,无论窗口打开多大或多小,它在Chrome,Firefox和IE中运行良好。但对于野生动物园来说,它是偏向右侧的。我想知道为什么以及如何解决这个问题。以下是在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%);}
谢谢。
答案 0 :(得分:2)
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%);
}