Html 文本缩进-不在Safari中显示文本

我对编码还不熟悉，我对文本缩进和safari有一些问题

在chrome和firefox上，一切正常。问题是我制作了两个按钮，一个在另一个上面，文本相邻，而文本没有显示在safari上

已经失去3个小时了，我不知道该怎么办

这是你的电话号码

.btn组.按钮{
背景：url(https://image.ibb.co/iSdLzS/red.jpg)不重复；
光标：指针；
宽度：100px；
高度：100px；
对象匹配：覆盖；
背景大小：100%；
显示：块；
文本缩进：105px；
字体大小：25px；
字体紧排：正常；
字体系列：拉托，无衬线；
文字装饰：无；
颜色：#007896；
边界：无；
不透明度：1；
过渡：0.3s；
}
.btn组.按钮：非（：最后一个子项）{
右边框：无；/*防止双边框*/
}
.btn组。按钮：悬停{不透明度：0.8
}
.btn组.按钮2{
背景：url(https://image.ibb.co/fskHeS/blue.png)不重复；
光标：指针；
宽度：100px；
高度：100px；
对象匹配：覆盖；
背景大小：100%；
显示：块；
文本缩进：105px；
字体大小：25px；
字体紧排：正常；
字体系列：拉托，无衬线；
文字装饰：无；
颜色：#007896；
边界：无；
不透明度：1；
过渡：0.3s；
}
.btn组.按钮2:非（：最后一个子项）{
右边框：无；/*防止双边框*/
}
.btn组.按钮2:悬停{不透明度：0.8
}

Reeed

蓝色

您会发现一个类似的问题，但我尝试了答案，但没有成功

然后我用

位置

做了这个把戏，我自己也试过了，希望能有所帮助

您必须为文本创建一个

p

标记，并将它们放置在

absolute

位置，但使用父按钮

relative

将它们垂直居中

.btn组.按钮{
背景：url(https://image.ibb.co/iSdLzS/red.jpg)不重复；
光标：指针；
位置：相对位置；
宽度：100px；
高度：100px；
对象匹配：覆盖；
背景大小：100%；
显示：块；
文本缩进：105px；
字体大小：25px；
字体紧排：正常；
字体系列：拉托，无衬线；
文字装饰：无；
颜色：#007896；
边界：无；
不透明度：1；
过渡：0.3s；
}
.btn组.按钮：非（：最后一个子项）{
右边框：无；/*防止双边框*/
}
.btn组。按钮：悬停{不透明度：0.8
}
.btn组.按钮2{
背景：url(https://image.ibb.co/fskHeS/blue.png)不重复；
光标：指针；
宽度：100px；
高度：100px；
对象匹配：覆盖；
背景大小：100%；
显示：块；
文本缩进：105px；
字体大小：25px；
字体紧排：正常；
字体系列：拉托，无衬线；
文字装饰：无；
颜色：#007896；
边界：无；
不透明度：1；
位置：相对位置；
过渡：0.3s；
}
.btn组.按钮2:非（：最后一个子项）{
右边框：无；/*防止双边框*/
}
.btn组.按钮2:悬停{不透明度：0.8
}
按钮p{
位置：绝对位置；
排名：0；
底部：0；
}

Reeed


蓝色的

谢谢！成功了。如此简单，却又如此耗时。