Question

当鼠标悬停在图像上时，我希望文本水平居中。它似乎在Chrome，FF和IE中运行良好，但在Windows上没有Safari。有人可以帮助我吗？

HTML

<div id="content">
    <article class="project">
        <img width="375" height="375" src="http://i.imgur.com/Eyv3TNs.jpg" alt="thumb">
        <div class="overlay">
            <a class="post-link expand" href="http://google.com">+</a>
        <h3>Red Palm Oil</h3></div>
    </article>
</div>

CSS

.project {
  float: left;
  margin: 0 1% 2%;
  max-width: 375px;
  overflow: hidden;
  position: relative;
  width: 100%;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.project:hover .overlay {
    opacity: 1;
}

.expand {
  background: #000;
  border: 5px solid #000;
  bottom: 0;
  color: #FFF;
  display: block;
  font-size: 30px;
  font-size: 3rem;
  height: 60px;
  left: 0;
  line-height: 50px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: 2;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

h3 {
  color: #FFF;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  left: 50%;
  line-height: 1.3;
  margin-top: 3.3em;
  padding: 0 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

JS

$('#content').on('mouseenter', 'article.project', function(){

    // If loading icon doesn't exist in the DOM...
    if ( !$('.overlay').find('.loading-icon').length) {

        // And if the project wrapper is activated...
        if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
            $(this).addClass('hover');
        } else {
            $(this).addClass('hover grayscale grayscale-fade');
        }

    // If loading icon exists in the DOM...
    } else {
        $(this).find('.post-link').hide();
    }

    // Dirty fix for 1px white flicker on hover (Chrome)
    var overlayWidth = $('article.project').outerWidth();
    $('.overlay').css({
        marginLeft: -1,
        width: overlayWidth + 2
    });

}).on('mouseleave', 'article.project', function(){

    // If #project-wrapper is activated...
    if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
        $(this).removeClass('hover');
        $(this).find('.post-link').show();

    // If #project-wrapper is not activated...
    } else {

        // If loading icon is present...
        if ( $(this).find('.loading-icon').length ) {

            // Only remove the 'hover' class
            $(this).removeClass('hover');

        // If loading icon is not present...
        } else {

            // Remove all classes
            $(this).removeClass('hover grayscale grayscale-fade');
            $(this).find('.post-link').show();
        }
    }
});

// Adjust the project titles so they always fit the container nicely
function adjustTitle() {
    var thumbWidth = $('article.project > img').outerWidth();
    if (thumbWidth <= 220) {
        $('.overlay > h3').addClass('mobile');
    } else {
        $('.overlay > h3').removeClass('mobile');
    }
}
$(window).on('resize', adjustTitle);

Answer 1

Safari在某些CSS3属性上仍需要供应商前缀，因此您需要在

之后添加

transform: translate(50%, 50%)：

-webkit-transform: translate(50%, 50%);

此外，您的解决方案似乎有点过于复杂。您可以删除left: 50%和transform: translate(50%, 50%)。

来获得居中文字

希望这有帮助。

Answer 2

我们问题的（技术）解决方案已由某人发布，但我想提出其他建议：

Safari for Windows已经过时了。我建议您使用不同的Windows浏览器。

但是，如果您只针对不同的浏览器进行浏览器优化，请考虑以下事项：Safari for Windows充其量只是版本5.1.7。根据{{3}}，Safari 5.1的全球份额为0.37％。将此数字与IE8（2.9％）和IE9（1.82％）进行比较，两者都不支持转换，IE8甚至不支持转换。

因此，如果您担心为Windows用户关闭那一小部分Safari，那么不幸的是，仍有一小部分老IE用户更糟糕。

无法在Windows Safari中获取文本

2 个答案: