在不同浏览器中渲染图像位置不同

我试图渲染图像，它完全出现在Firefox和Chrome中，但Safari（v 7.0.3）中存在问题。在Safari中，图像转移到右下角，而我希望图像位于最下面的中心。在不同浏览器中渲染图像位置不同

这是我的CSS

.circular { 
    /*margin: 10px 30px 0px 30px;*/ 
    display: block; 
    margin: 0 auto; 
    position: relative; 
    bottom:-400px; 
    left:93%; 
    transform:translateX(-50%); 
}

HTML：

<section class="module parallax parallax-1"> 
      <div class="container"> 
       <div class="circular" vertical-align:middle; text-align:center><img src="images/index/yoyo.png" width=120px height=120px></div> 
       <div class="social_tags" vertical-align:middle; > 
       <a href="https://github.com/yoyo"><img src="images/index/github.png" width=40px height=40px></a> 
       <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width=40px height=40px></a> 
       <a href="mailto:[email protected]?Subject=Hello" ><img src="images/index/gmail.png" width=40px height=40px></a> 
       <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width=40px height=40px></a> 
       </div> 
      </div> 
</section>

来源

2015-11-12 blackmamba

哪个版本的Safari？你有没有尝试过对'transform'属性使用'-webkit'前缀？当你说它“有问题”时，你能详细说明你看到的是什么问题吗？ – Quantastical

@Quantastical：编辑帖子 – blackmamba

你必须与你的HTML几个问题。我固定他们在这个小提琴和它的作品在Chrome一样在Safari：https://jsfiddle.net/msq0eqch/3/

这是纠正的html代码：
（你有你的风格不风格=“”等）

<section class="module parallax parallax-1"> 
      <div class="container"> 
       <div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div> 
       <div class="social_tags" style="vertical-align:middle;" > 
       <a href="https://github.com/yoyo"><img src="images/index/github.png" width="40px" height="40px"></a> 
       <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width="40px" height="40px"></a> 
       <a href="mailto:[email protected]?Subject=Hello" ><img src="images/index/gmail" width="40px" height="40px"></a> 
       <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width="40px" height="40px"></a> 
       </div> 
      </div> 
</section>

另外加入-webkit-transform:translateX(-50%);到你的CSS。

来源

2015-11-12 14:48:54

它适用于Chrome和Safari，但不适用于Firefox。在Firefox中，图像向右移动。 – blackmamba

也加'-moz-transform：translateX（-50％）;' –

这样做了。谢谢：） – blackmamba

在不同浏览器中渲染图像位置不同

回答

相关问题