Question

我正在尝试渲染图像，它在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:yoyo@gmail.com?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>

Answer 1

你的html有几个问题。我将它们固定在这个小提琴中，它在chrome中与在safari中使用相同：https://jsfiddle.net/msq0eqch/3/

这是更正后的HTML代码：
（你的风格没有style =“”等。）

<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:yoyo@gmail.com?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中。

在不同浏览器中呈现不同的图像位置

1 个答案: