CSS elements not displaying properly in emails

问题

I'm trying to create a service desk ticket template that will be distributed via email. By following a few guides online on how to create dynamic email templates that will look good/consistent on different devices and email clients, I've come with this result:

However, when the email is sent out, it becomes this horrid creation, seeming to no longer respect using percentages for width (the right side loses its padding):

This problem persists between Outlook, Gmail, and iOS's Mail client. I've established that something must be getting ignored or is unusable for emails in my header tag, but cannot identify exactly what the issue is. I would appreciate any insight or solutions to resolve what exactly is breaking here.

Edit: I wanted to mention I have also used mailchimp's CSS inliner tool, but the output of that yielded the exact same results. I have also tried using style="display: block;" for the img styles, but when that resolved nothing I simply removed the company image that was used in the header of the ticket... and the problem persisted.

Snippet attached:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	box-sizing: border-box;
}
img {
	display: block;
}
html {
	font-family: "Lucida Sans", sans-serif;
}
.header {
	font-size: 45px;
	background-color: #bbbcbc;
	width: 75%;
	color: #000000;
	padding: 15px;
}
.box {
	width:75%;
	border: 20px solid #bbbcbc;
	margin: 0;
}
.case-number {
	font-size: 20px;
	background-color: #535659;
	color: white;
	width: 100%;
	padding: 10px;
}
.date-opened {
	font-size: 20px;
	background-color: #bbbcbc;
	color: #000000;
	width: 100%;
	padding: 10px;
}
.body {
	font-size: 20px;
	background-color: white;
	color: black;
	width: 100%;
	padding: 15px;
}
.ttable th {
	width: 20%;
	text-align: left;
	background-color: #bbbcbc;
	border: 1px solid #bbbcbc;
	padding: 5px;
	margin:0;
}
.ttable td {
	width: 60%;
	border: 1px solid #bbbcbc;
	padding: 5px;
	margin:0;
}
.footer {
	width: 100%;	
	background-color: #bbbcbc;
	color: black;
	text-align: center;
	padding-top: 20px;
}

</style>
</head>
<body>

<div class="header">
	<img src="" style="display: block;"/>
</div>
<div class="box">
	<div class="case-number">Case Number: 123456</div>
	<div class="date-opened">Date Opened: 14 June 2018 at 12:00 PM</div>
	<div class="body">
		You are receiving this email because your case has been updated. Your case details and any updates can be found below this message. 
		<br></br>
		If you wish to post a comment to the case you can simply reply to this email and your case will be updated.
		If you would like to include a screenshot or relevant log files you can do so by including them in your reply. 
		<br></br>
		[progress bar goes here]
		<br></br>
		In order to proceed with your case we will need additional information or clarification on the reported issue. 
		Please provide the requested information within the next 4 days. 
		If no response is received during this time we will temporarily archive your case. 
		Once you are ready to continue with simply reply to one of the case emails.
		<br></br>
		<div class="ttable">
			<table>
				<tr>
					<th>Subject</th>
					<td>TICKET SUBJECT HERE</td>
				</tr><tr>
					<th>Description</th>
					<td>TICKET DESCRIPTION HERE</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="footer">
		
	</div>
</div>


</body>
</html>

回答1:

Judging from your images I would guess that the general box-sizing: border-box; property is ignored. So I would try to avoid to use bordersettings for the outer container (.box) and instead use padding: 20px (same as previous border thickness) and a background-color equal to the previous border-color on it to get a border-like effect. (and remove box-sizing: border-box;)

回答2:

Box-sizing is not supported by many email clients. I would consider alternatives.

https://www.campaignmonitor.com/css/box-model/box-sizing/

Outlook has buggy support for padding and margin.

https://www.campaignmonitor.com/css/box-model/padding/

Outlook doesn't really support <div>.

Outlook has some spotty support for in-document style sheets when it comes to width. Setting a hard value width="600" will generally work better than width="100%". You can still declare either in-line or in-document width: 100% !important; which most modern email clients like IOS will use, but Outlook tends to ignore.

Outlook Desktop ignores @media queries. In addition, so does Android. So you can specify specific css values that Gmail, IOS and other clients will use.

If you inline the background colors in the tables or use <table bgcolor="#ff0000"> Android and Outlook will pick up the colors.

In general, your template looks good. It just needs fine-tuning to work better.

Good luck.

来源：https://stackoverflow.com/questions/51404319/css-elements-not-displaying-properly-in-emails

标签

html

css

html-email