html - 使用 CSS3 的图像上的绝对位置文本在 Safari 上不起作用

Question

我正在尝试将带有文本的元素置于图像上方，我的代码在任何地方都可以正常工作，除了 Safari(对于 Windows，如果这意味着什么)，它甚至可以在 Internet Explorer 9 上工作!

这是一个 fiddle :http://jsfiddle.net/keleturner/b7DeH/

我找到的唯一方法是给 .main 设置高度，但由于各种原因我不能这样做。有没有办法让它的文本以高度覆盖在图像的中间:auto;？

Answer 1

我不确定您是否有大量 div 嵌套的具体原因，但我已经在这里清理了它:http://jsfiddle.net/b7DeH/3/

HTML:

<div class="main">
    <span>Text</span>
    <img src="http://placekitten.com/300/200?image=3" />
</div>

CSS:

span  {
    position: absolute;
    width: 100%; top: 50%; 
    /* and other prefixes */
    transform: translateY(-50%); 
    font-size: 20px; font-weight: 700; 
    color: red; text-align: center; }

如您所见，问题似乎源于高度问题。你有 height: 100% for .in 和 .out 但没有任何 parent /祖先告诉它 100% 的高度，它会继续前进，我想它基本上是文档的 100% 高度，这就是为什么它以页面而不是 div 为中心的原因。