html адрес электронной почты поля фотографий outlook2013

Question

Я делаю html адрес электронной почты. Я сделал это в Gmail:

, но в перспективе это выглядит следующим образом:

, как я могу решить эту проблему?

<img src="http://leavingstone.me/dev/Images_For/MoneyMan/FB.png" align="left" style="width: 29px; height: 29px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 2px;display: block;line-height: 100%;"> 

JSFIDDLE

Answer 1

Проверьте border-radius поддерживается в электронной почте: Link.
Лучше использовать изображения для этого.
Кроме того, префиксы вендора действительны только в том случае, если электронная почта просматривается через браузер.

Попробуйте изменить margin с дополнением:

.soc { 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 
.wrapper { 
 
    padding: 2px; 
 
    display: inline-block; 
 
} 
 
.facebook { 
 
    background-color: blue; 
 
} 
 
.twitter { 
 
    background-color: cyan; 
 
} 
 
.google-plus { 
 
    background-color: red; 
 
}

<div class="socials"> 
 
    <div class="wrapper"> 
 
    <div class="facebook soc"></div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="twitter soc"></div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="google-plus soc"></div> 
 
    </div> 
 
</div>