notepad ++ 'ı kullanarak ve görünüm seçenekleri ile gönderirken bir html kodu çalıştırdığımızda çıktıdaki fark

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>stars.css Demos</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);

* {
  margin: 0;
  padding: 0;
  font-family: roboto;
}

body { background: #000; }

.cont {
  width: 93%;
  max-width: 350px;
  text-align: center;
  margin: 4% auto;
  padding: 30px 0;
  background: #111;
  color: #EEE;
  border-radius: 5px;
  border: thin solid #444;
  overflow: hidden;
}

hr {
  margin: 20px;
  border: none;
  border-bottom: thin solid rgba(255,255,255,.1);
}

div.title { font-size: 2em; }

h1 span {
  font-weight: 300;
  color: #Fd4;
}

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
</style>
<link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
</head>

<body>


<div class="cont">
<p><i>Rate Us</i></p>
  <div class="stars">
    <form action="">
      <input class="star star-5" id="star-5-2" type="radio" name="star"/>
      <label class="star star-5" for="star-5-2"></label>
      <input class="star star-4" id="star-4-2" type="radio" name="star"/>
      <label class="star star-4" for="star-4-2"></label>
      <input class="star star-3" id="star-3-2" type="radio" name="star"/>
      <label class="star star-3" for="star-3-2"></label>
      <input class="star star-2" id="star-2-2" type="radio" name="star"/>
      <label class="star star-2" for="star-2-2"></label>
      <input class="star star-1" id="star-1-2" type="radio" name="star"/>
      <label class="star star-1" for="star-1-2"></label>
    </form>
  </div>
</div>

</body>
</html>

Çalıştırdığımda krom yıldızları belirecek.

Görünüm yoluyla gönder seçeneğini kullandığımda,

()()()()()

google-chrome notepad++ microsoft-outlook-2010

— Anusha Kokkinti
kaynak

Görünüm yoluyla gönder seçeneğini kullandığımda,

()()()()()

Bunun nedeni, Outlook'un bir Web Tarayıcısı olmamasıdır.

Outlook yalnızca bir HTML ve CSS alt kümesini destekler.

Bu, Outlook 2007’den bu yana değişmedi
Render motoru, Outlook 2013'te aynıdır.
Word 2007 HTML ve CSS Outlook 2007'deki Rendering Yetenekleri, HTML ve CSS desteğini belgeler.
CSS'nin Nihai Kılavuzu, CSS'nin Outlook tarafından ne desteklendiğini belgeler. Çok şeyin eksik olduğunu görebilirsiniz.

Birkaç yıl boyunca e-postaları tasarlayıp kodladıysanız, Outlook'un e-posta standartları için verdiği desteksizliğin farkındasınızdır. Microsoft, Outlook 2007'nin tanıtımıyla Word'e (Internet Explorer'dan) render motoru olarak geçti ve o zamandan beri geriye bakmadı (errr, ileri?). E-posta topluluğunun çabalarına ve Microsoft'un iyi niyetli bir yanıtına rağmen, bu, Outlook'taki HTML ve CSS desteğinin 2007, 2010 ve şimdi 2013 sürümleri arasında hemen hemen aynı kaldığı anlamına gelir.

Kaynak Outlook 2013 Hala Word Tarafından Desteklenmektedir; E-posta Testi için Şimdi Kullanılabilir

— DavidPostill
kaynak