Html 针对雅虎邮件浏览器CSS

我想知道是否有人想出了一个针对浏览器上的雅虎邮件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> 

_过滤#yiv6637726198{
文本对齐：左；}
#yiv6637726198.yiv6637726198行中心{显示：表格行；文本对齐：中心；垂直对齐：中间！重要；高度：20px！重要；}
#yiv6637726198
_过滤#yiv6637726198{
}
#yiv6637726198.yiv6637726198主{宽度：100%；}
#yiv6637726198.yiv6637726198标头{宽度：100%；}
#yiv6637726198.yiv6637726198收割台img{宽度：100%；高度：自动；}
#yiv6637726198。yiv6637726198徽标图像{宽度：75px；高度：30px；}
#yiv6637726198。yiv6637726198图标img{宽度：19px；高度：18px；}
#yiv6637726198.yiv6637726198图标环绕{宽度：19px；}
#yiv6637726198.yiv6637726198按钮{宽度：100%；高度：自动；}
#yiv6637726198.yiv6637726198页脚{显示：无；}
#yiv6637726198。yiv6637726198页脚大小{宽度：100%；}
#yiv6637726198.yiv6637726198btn{宽度：100px！重要；高度：自动！重要；}
#yiv6637726198.yiv6637726198文本{字体大小：9px！重要；文本对齐：居中；}
#yiv6637726198.yiv6637726198较小{宽度：5px！重要；高度：5px！重要；}
#yiv6637726198.yiv6637726198show{display:block；}
#yiv6637726198.yiv6637726198标题{字体大小：12px！重要；}
#yiv6637726198.yiv6637726198日期{字体大小：9px！重要；行高：14px！重要；}
#yiv6637726198.yiv6637726198更小{宽度：10px！重要；}
#yiv6637726198.yiv6637726198小隐藏{显示：无；}
#yiv6637726198.yiv6637726198行{显示：表格行；文本对齐：左；}
#yiv6637726198.yiv6637726198行中心{显示：表格行；文本对齐：中心；垂直对齐：中间！重要；高度：20px！重要；}
#yiv6637726198

这是我用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>

@介质（最大宽度：321px）{
.row{显示：表格行！重要；文本对齐：左！重要；}
.row center{显示：表格行！重要；文本对齐：中心！重要；垂直对齐：中间！重要；高度：20px！重要；}
}
@介质（最大宽度：241px）{
.hide{display:none！重要；}
.main{宽度：100%}
.header{宽度：100%；}
.header img{宽度：100%；高度：自动；}
.logo img{宽度：75px；高度：30px；}
.icon img{宽度：19px；高度：18px；}
.icon wrap{宽度：19px；}
.按钮{宽度：100%；高度：自动；}
.footer{显示：无！重要；}
.footer大小{宽度：100%}
.btn{宽度：100px！重要；高度：自动！重要}
.text{字体大小：9px！重要；文本对齐：居中！重要；}
.较小{宽度：5px！重要；高度：5px！重要；}
.show{display:block；}
.title{字体大小：12px！重要；}
.date{字体大小：9px！重要；行高：14px！重要；}
.更小{宽度：10px！重要}
.small hide{显示：无！重要；}
.row{显示：表格行！重要；文本对齐：左！重要；}
.row center{显示：表格行！重要；文本对齐：中心！重要；垂直对齐：中间！重要；高度：20px！重要；}
}

（您会明白这只是整个过程的一小部分，因为显示完整代码会占用太多的时间）

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

那么，你们有什么想法来点小技巧吗？ 这里有一个小问题，内联！重要信息是否优先于激活的媒体查询！重要信息

谢谢你的帮助

//更新1//

---

通过一些测试，我发现通过指定“全宽度”媒体查询（最大宽度：900px）或类似的方式，通过使用！important将每个元素的样式设置为与它们的内联样式相同的样式，以及通过反转媒体查询的顺序（在顺序颠倒的情况下，为这些元素添加最小宽度），Yahoo Mail会选择底部的一个来设计整个电子邮件。它会删除所有响应，但至少不会破坏整个布局或将其延伸到月球和月球…

这是一个已知的问题，尽管有混合报道称雅虎已经解决了这个问题。我想不是

下面是一些解决问题的技巧

---

下面是一个例子，正如John所提到的，这是一个众所周知的问题，Yahoo！Mail“公开”了您只针对移动设备的媒体查询

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

我写了一篇文章，分析了雅虎邮件在你的媒体查询中到底做了些什么——尽管它本身并没有给你任何新的策略

更新自2015年3月2日起，Yahoo！Mail终于修复了CSS解析器。因此，您所面临的问题将不再明显

见：

---

因此，雅虎邮件确实无法处理媒体查询。谢谢，这很有帮助，而且这些小技巧比我想出的方法更简洁！：）我会放弃你的答案，但我会等着看其他人是否有其他解决方案，然后再接受它。再次感谢汉克斯的夸奖！雅虎！邮件刚刚解决了他们的问题