Рендеринг позиций изображений разных в разных браузерах

Я пытаюсь отображать изображения, он отлично подходит для 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? Вы пытались использовать префикс '-webkit-' для свойства 'transform'? Когда вы говорите, что у него «проблемы», можете ли вы уточнить, какие проблемы вы видите? – Quantastical

@Quantastical: Отредактировано сообщение – blackmamba

У вас есть несколько проблем с вашим HTML. Я установил их в этой скрипке, и это работает так же, как в хроме в сафари: 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

Рендеринг позиций изображений разных в разных браузерах

ответ

Смежные вопросы