Question

我在Safari中遇到了一个奇怪的问题，即在我正在处理的网站上显示按钮。

1。在使用 left：...; 时，是否可以使文本中心在按钮上保持对齐？这会解决问题吗？

2。将 span 放置在相对放置的div .text-pos 中，并带有子类 .text-pos span ... 位置：绝对; 是不好的形式？它会解决这个问题吗？

代码：

.button a span {
	z-index: 2;
	width: 100%;
	position: absolute;
	top: 12%;
	color: #000000;
	text-align: center;
	font-size: 4vmin;

}

.button a img {
	
	height: 100%;
	display: flex;
	
}

<div class="button antiques">
	<a href="/landing/gallery/antiques/antiques.html">
		<img alt="antiques" src="/assets/img_style/plank.png">
		<span>ANTIQUES</span>
	</a>
</div>

未包含left: ...;，因为文本需要在按钮上居中对齐。

结果（发布图片时太新了）： http://i.imgur.com/3E55EMH.png

我的第一个想法是问题出在vmin上，但是：

1-文本可通过浏览器调整进行适当缩放。

2-悬停上的文字（左上图像框）也使用vmin，但是   适当定位。

参考第二点，文本被放置在一个相对定位的div容器中，以强制像这样的宽高比：

<div id="wide-container"> /* position: relative; */
    <div id="content"> /* position: absolute; */
        ...
    </div>
</div>

我没有准备好访问OSX机器，所以任何输入都会受到赞赏！

对您可能提供的任何其他方法持开放态度。谢谢（：

解决

.button {
	
	height: 6vmin;
	margin-top:1.5vmin;
	margin-bottom:1.5vmin;
	position: relative;
  
  }

.button a {
	
	height: 100%;
	
}

.button:before a {
	
	content: "";
	display: block;
	
}

.button a span {
	z-index: 2;
	position: absolute;
	top: 9%;
	bottom: 0;
	left: 0;
	right: 0;
    text-align:center;
    width: 100%;
	height: 100%;
	
	color: #000000;
	font-size: 4vmin;

}

Answer 1

通过将按钮设置为相对定位，同时将文本位置保留为绝对位置，找到解决方案。在编辑的问题中更详细地概述了解决方案。

问题来自于我对浏览器如何区别对待盒子模型的误解。 Safari似乎采用了包含的元素并将它们单独悬浮，因为图像没有定位属性。

此解决方案在Chrome，Firefox和Safari上显示的大致相同。

Safari

1 个答案: