diferença na saída quando executamos um código html usando o notepad ++ no Chrome e enviando via opções do outlook

1
<!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>

Quando eu executo, estrelas chrome aparecerão.

Quando eu uso a opção enviar via outlook, ele é exibido como

()()()()()
    
por Anusha Kokkinti 16.09.2016 / 08:39

1 resposta

0

Quando eu uso a opção enviar via outlook, ele é exibido como

()()()()()

Isso ocorre porque o Outlook não é um navegador da Web.

O Outlook suporta apenas um subconjunto de HTML e CSS.

If you’ve been designing and coding emails for a few years now, you’re likely aware of Outlook’s dismal support for email standards. Microsoft switched to Word (from Internet Explorer) as its rendering engine with the introduction of Outlook 2007 and hasn’t looked back (errr, forward?) since. Despite the email community’s efforts and a well-intentioned response from Microsoft, this means that HTML and CSS support in Outlook has remain virtually unchanged between versions 2007, 2010 and now 2013.

Fonte Outlook 2013 ainda ativado por Word; Agora disponível para teste de e-mail

    
por 16.09.2016 / 10:31