Safari with an unexpected vertical slab for icons on the footer should appear in the line

Question

I tried to add the twitter / facebook icon to the footer of the site, like footer foot.cr. Everything works for me, except that safaris have unexpected vertical tiles for twitter and facebook. I tried to upload a screenshot, but I am a new user, so I can’t do it right now.

So, I searched for the answer and found q / a, Is <img> block element level or inline level here?

So, I again went to side.cr to see that css has a user agent stylesheet.

I added this line of code to my css:

.footer ul li img.t, li img.f { width: 40px; vertical-align: middle; display: inline-block; } 

and he fixed the problem.

But I have a few questions in my head:

• why is side.cr css displayed as a non-editable user agent, while I have to add this display-inline to my css?
• How does “display: inline block” fix the problem?

Please note: when you mouse over a gray twitter, it launches swap.js, changing the icon image to a colored one, but in safari the highlighted icon is larger than gray. I think I almost know the answer. You just need someone who knows all the excesses behind this.

Thanks!

Answer 1

Solution: To resolve this problem, make sure that you set the height and width of the image so that it does not change during loading.

 <img src="http://www.side.cr/images/contact/twitter_off.svg" class="twitter_bird img_swap" height="52px" width="52px" /> 

or

 .twitter_bird { height:50px; width:50px } 

Explanation: When you switch the image name, the safari starts loading the image, but it does not know the height or width until it loads. If you set the height and width, it will not grow from 0px to 52px.