Question

我想知道是否有人想出了一个用于在浏览器上定位Yahoo Mail 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电子邮件的需要正确完成。

那么，你们有什么想法进行一点点破解吗？这里有一个小问题，内联！重要优先于媒体查询激活！重要吗？

感谢您的帮助。

// UPDATE 1 //

通过一些测试，我发现通过指定“全宽”媒体查询（max-width：900px）或类似的东西，并通过样式化每个元素与其内联样式相同！important，AND通过反转我的媒体查询的顺序（现在订单被倒置的那些添加最小宽度），雅虎邮件将选择最底层的一个来整理整个电子邮件。它消除了每一个响应，但至少它不会破坏整个布局或将其拉伸到月球和背部......

Answer 1

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

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

我写了一篇文章，分析究竟是什么Yahoo!邮件似乎与您的媒体查询有关 - 尽管它本身并没有给您任何新的策略。

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

更新截至2015年3月2日雅虎！邮件最终修复了他们的CSS解析器。所以你面临的问题将不再显现出来。

请参阅： http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo

Answer 2

这是一个众所周知的问题，尽管雅虎已经解决了这个问题。我猜不是......

以下是解决Yahoo media queries bug

的一些技巧

以下是responsive template with the fix in action

的示例

针对Yahoo Mail浏览器CSS

2 个答案: