html电子邮件边缘照片展望2013

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 更好地使用图像。
此外，只有通过浏览器查看电子邮件时，wendor前缀才有效。

尝试使用padding更改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>