針對雅虎郵件瀏覽器CSS

我想知道是否有人提出了針對瀏覽器上的Yahoo Mail CSS的黑客攻擊。具體而言，不是內聯CSS，而是電子郵件中標籤內的雅虎創建的類。我正面臨的問題是：我爲一個活動編寫了一個響應模板，雖然所有東西在iOS和每個主要郵件客戶端都能正常工作，但雅虎有一個我在其他地方找不到的問題：它讀取標籤，因爲它會讀取常規標籤，完全跳過媒體查詢（實際上，它改變了所有被視爲樣式的代碼）。我的意思是這樣的：它會從底部到頂部讀取樣式，因此即使在大型設備（如計算機屏幕）上閱讀，也可以將較小的屏幕樣式應用於電子郵件。針對雅虎郵件瀏覽器CSS

這裏是什麼樣子的雅虎郵件處理後：

<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 //

對於一些測試，我發現，通過指定一個「全寬」媒體查詢（最大寬度：900px）或類似的東西，並通過造型每個元素相同作爲它們的重要內聯樣式，並且通過顛倒我的媒體查詢中的順序（向訂單翻轉後的那些添加最小寬度），Yahoo Mail會選擇最底層的樣式來整個電子郵件。它消除了每一個響應，但至少它不會破壞整個佈局或將其延伸到月球和背部......

來源

2013-10-03 R Lacorne

雅虎郵件只是修復了他們的CSS解析器（真實的）。我會更新我的答案。 –