1

我想知道是否有人想出了针对浏览器上的雅虎邮件 CSS 的黑客攻击。具体来说，不是内联 CSS，而是 Yahoo 在电子邮件标签中创建的类。

我面临的问题是：我为活动编写了一个响应式模板，虽然在 iOS 和每个主要邮件客户端上一切正常，但雅虎有一个我在其他任何地方都没有发现的怪癖：它将标签读取为它会读取一个普通的，完全跳过媒体查询（实际上，它改变了所有被认为是样式的代码）。我的意思是：它会从底部到顶部读取样式，因此即使在大型设备（如计算机屏幕）上读取电子邮件，也会将较小的屏幕样式应用于电子邮件。

以下是 Yahoo Mail 处理后的样子：

<style type="text/css">

_filtered #yiv6637726198 {
text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-    align:middle !important;height:20px !important;}
#yiv6637726198 

_filtered #yiv6637726198 {
}
#yiv6637726198 .yiv6637726198main {width:100%;}
#yiv6637726198 .yiv6637726198header {width:100%;}
#yiv6637726198 .yiv6637726198header-img {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198logo-img {width:75px;height:30px;}
#yiv6637726198 .yiv6637726198icon-img {width:19px;height:18px;}
#yiv6637726198 .yiv6637726198icon-wrap {width:19px;}
#yiv6637726198 .yiv6637726198button {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198footer {display:none;}
#yiv6637726198 .yiv6637726198footer-size {width:100%;}
#yiv6637726198 .yiv6637726198btn {width:100px !important;height:auto !important;}
#yiv6637726198 .yiv6637726198text {font-size:9px !important;text-align:center;}
#yiv6637726198 .yiv6637726198smaller {width:5px !important;height:5px !important;}
#yiv6637726198 .yiv6637726198show {display:block;}
#yiv6637726198 .yiv6637726198title {font-size:12px !important;}
#yiv6637726198 .yiv6637726198date {font-size:9px !important;line-height:14px !important;}
#yiv6637726198 .yiv6637726198smaller {width:10px !important;}
#yiv6637726198 .yiv6637726198small-hide {display:none;}
#yiv6637726198 .yiv6637726198row {display:table-row;text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-   align:middle !important;height:20px !important;}
#yiv6637726198 

</style>

这是我的代码，用我的 HTML 编写并被其他支持响应的邮件客户端理解：

<style type="text/css">

@media (max-width:321px) {
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    @media (max-width:241px) {
    .hide { display:none !important; }
    .main { width:100% }
    .header { width:100%; }
    .header-img { width:100%; height:auto; }
    .logo-img { width:75px; height:30px; }
    .icon-img { width:19px; height:18px; }
    .icon-wrap { width:19px; }
    .button { width:100%; height:auto; }
    .footer { display:none !important; }
    .footer-size { width:100% } 
    .btn { width:100px !important; height:auto !important }
    .text { font-size:9px !important; text-align:center !important; }
    .smaller { width:5px !important; height:5px !important; }
    .show { display:block; }
    .title { font-size:12px !important; }
    .date { font-size:9px !important; line-height:14px !important; }
    .smaller { width:10px !important }
    .small-hide { display:none !important; } 
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    </style>

（你会明白这是整个事情的一小部分，因为显示完整的代码会占据太多的位置）。

此外，我的内联 CSS 已根据 html 电子邮件的需要正确完成。

那么，你们有什么小窍门吗？还有一个小问题，内联 !important 是否优先于激活的媒体查询 !important ？

谢谢你的帮助。

// 更新 1 //

通过一些测试，我发现通过指定“全宽”媒体查询（最大宽度：900px）或类似的东西，并通过使用！我的媒体查询（现在为那些顺序倒置的查询添加最小宽度），雅虎邮箱会选择底部的那个来设置整个电子邮件的样式。它消除了所有响应，但至少它不会破坏整个布局或将其拉伸到月球并返回......

4

2 回答 2

3

正如约翰所提到的，这是一个众所周知的问题，雅虎！邮件“公开”您的媒体查询仅适用于移动设备。

您发现的策略之一是在您的移动媒体查询之后添加另一个媒体查询块并将其定位到更大的浏览器宽度，但 John 链接的策略使得没有必要这样做。

我写了一篇文章分析究竟是什么雅虎！邮件似乎正在处理您的媒体查询——尽管它本身并没有为您提供任何新策略。

http://freshinbox.com/blog/how-yahoo-mails-mangling-of-media-queries-affects-your-css/

更新截至 2015 年 3 月 2 日 Yahoo! Mail 终于修复了他们的 CSS 解析器。所以你所面临的问题将不再表现出来。

见： http: //freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo

于 2014-01-13T02:25:56.420 回答
1

这是一个已知问题，尽管有混杂的报道称它已被雅虎解决。我猜不会...

以下是一些解决雅虎媒体查询错误的技术

这是一个响应式模板的示例，其中包含正在执行的修复

于 2013-10-03T15:29:23.190 回答