在不同瀏覽器中渲染圖像位置不同

我試圖渲染圖像，它完全出現在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

在不同瀏覽器中渲染圖像位置不同

回答

相關問題