手动调用premailer不是内联样式
手动调用premailer不是内联样式
提问于 2016-01-23 06:58:45
我正在使用Sendgrid的模板系统，需要手动内联一些内容的css，这些内容将包含在Sendgrid smtpapi调用中。
Premailer似乎并没有真正内联css样式。我可以检查调用Premailer.new的结果，但是processed_doc和文档都没有内联样式。
我尝试过不同的方法：
直接包含css文件：
header = <<-HTML
<div class="preview-content">
#{data["content"]}
</div>
HTML
p header
=> "<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. </p>\n</div>\n"
premailer = Premailer.new(header, with_html_string: true, adapter: :nokogiri,css: [Rails.root.join('app', 'assets', 'stylesheets', 'email_base.css').to_s], input_encoding: "UTF-8", verbose: true)
p premailer.processed_doc.to_html
=> "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>\n</div>\n</body></html>\n"premailer.doc.to_html返回相同的内容，没有内联css。
我检查了css文件是否可访问，样式是否适用于.preview-content p。
向文档添加页眉
header = <<-HTML
<!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>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link rel="stylesheet" href="/asset/email_base.css" media="all">
</head>
<body width="100%" height="100%" bgcolor="#ffffff" style="margin: 0; padding: 0 20px;">
<div class="preview-content">
#{data["content"]}
</div>
</body>
</html>
HTML
p header
=> '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n <html xmlns=\"http://www.w3.org/1999/xhtml\">\n <head>\n <meta charset=\"utf-8\"> <!-- utf-8 works for most cases -->\n <meta name=\"viewport\" content=\"width=device-width\"> <!-- Forcing initial-scale shouldn't be necessary -->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <!-- Use the latest (edge) version of IE rendering engine -->\n <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->\n <link rel=\"stylesheet\" href=\"/asset/email_base.css\" media=\"all\">\n </head>\n <body width=\"100%\" height=\"100%\" bgcolor=\"#ffffff\" style=\"margin: 0; padding: 0 20px;\">\n <div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div>\n </body>\n </html>\n'要内联的所需css：
.the-excerpt,
.the-excerpt p,
.preview-content p
// +responsive-text(18px, 30px)
line-height: 1.8 !important
font-size: 18px手动内联css是否遗漏了什么？这两种方法似乎都没有产生任何不同的结果。
回答 1
Stack Overflow用户
发布于 2016-09-29 01:29:34
我现在正在试用Premailer，我自己也遇到了一些问题。但在我看来，Premailer实际处理内容并获取不同内容的方式(它至少删除了具有适当配置设置的类)是使用以下方法：
premailer = Premailer.new(html, { :with_html_string=>true, :verbose=>true, :remove_classes=>true })
return premailer.to_inline_css页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34957348
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号