我已经制作了一个应该响应的html电子邮件模板.它在不同的电子邮件客户端和移动设备上显示完美.但是在Outlook上它已经延伸到100%,这绝对不是很酷,因为标题宽度为600px.
我知道Outlook不支持该max-width属性.但使用只会width导致移动浏览器显示错误.
因此,我的问题是:我应该做什么/更改模板以使其响应并仍然以600px的最大宽度显示？
这是代码.首先使用额外的css(应该更好阅读),第二个使用内联css(应该在发送电子邮件时使用).使用http://beaker.mailchimp.com/inline-css将其呈现为内联.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%; …CSS3 Pie是一个很棒的工具,可以在IE中呈现一些CSS3.爱它!但与Wordpress的集成似乎相当困难.情况如下:
页面模板上的Html:
<div class="page_header_text center_shadow">
<p>test12</p>
</div>
Function.php :(来自http://www.position-relative.com/2011/04/using-css-pie-in-wordpress-themes-updated/)
global $wp_styles;
wp_enqueue_style( "ie8", "http://dennishunink.nl/ghana/wp/wp-content/themes/ghanavakantie/style/iePie.css", false, $version_identifier, "all");
$wp_styles->add_data( "ie8", 'conditional', 'IE 8' );
iePie.css:
.center_shadow{
position: relative;
behavior: url(PIE.htc);
}
实际上,应用了iePie.css文件.例如,背景:#000; 工作中.但是以一种奇怪的方式,PIE.htc文件却没有.
我尝试了不同的相对和绝对路径,在不同的位置上传了PIE.htc.
该网站位于http://dennishunink.nl/ghana/wp/(仍在开发中)
希望有人有答案,非常感谢每一个建议!