邊界半徑在電子郵件和瀏覽器中不起作用

我一直在設計一個時事通訊，同時邊框半徑在我的本地主機上工作（顯示所有圓邊） - 但在通過示例電子郵件進行測試時不起作用。我使用雅虎郵件和Firefox給自己發送電子郵件，結果發現它有尖銳的邊緣。它在Outlook 2007中也不起作用。邊界半徑在電子郵件和瀏覽器中不起作用

任何人都知道如何解決這個問題？我會感謝你的幫助。

來源

2011-08-22 Julie

重複的問題，http://stackoverflow.com/questions/7089248/email-newsletter-not-rendering-correctly/7089327#7089327 –

它不會在Outlook 2007中工作，因爲它使用word作爲渲染器，它不支持大多數CSS。

對於firefox，你需要添加-moz-前綴，請確保你已經做到了。

如果不是，請發佈您的css和firefox版本。

來源

2011-08-22 10:37:07 rickyduck

感謝您的提示 - 現在將添加。除了添加'moz-'以允許它在Firefox上顯示外，還有其他更簡單的方法來創建可以在Outlook上顯示的圓邊？我用了一段代碼，它太長了，所以在這裏推薦我使用border-radius。事實證明，它不適用於Outlook :-( – Julie

唯一能做的就是圖像，這對電子郵件來說是最好的選擇，因爲這意味着它可以在每個圖像電子郵件客戶端上運行。基於web的電子郵件客戶端，如yahoo和gmail，只需使用瀏覽器作爲渲染客戶端 – rickyduck

再次感謝，看起來像現在唯一的選擇，無論如何幹杯 – Julie

電子郵件營銷活動工具（如Outlook，Gmail，Hotmail）中的簡報具有較少的CSS支持。此外，Web瀏覽器不支持電子郵件客戶端支持border-radius。

最好使用背景圖像，純圖像，漸變，圓角和3D相關的東西，而不是使用CSS樣式。

看到這個參考：Campaign Monitor

此引用顯示哪些CSS屬性是由不同的電子郵件客戶端支持。

見其他文獻：Email newsletter not rendering correctly

來源

2011-08-22 10:45:21

我不認爲Outlook 2007的支持border-radius屬性，所以它可能是正常的，如果它不顯示圓角。如果你正在尋找一個解決辦法，我建議你看一下這個問題：How can I make rounded corners on non-CSS3 browsers?

對於現代瀏覽器的CSS，目前需要前綴一定的根據企業的性質，例如：

.withRoundedCorners { 
    border-radius: 5px;  // Standard 
    moz-border-radius: 5px; // Firefox 
    khtml-border-radius: 5px; // 
    o-border-radius: 5px;  // Opera 
    webkit-border-radius: 5px; // Safari 
    ms-border-radius: 5px;  // Internet Explorer 9+ 
}

我知道它很無聊......但這只是暫時的，將來只需要border-radius。

來源

2011-08-22 10:53:03 Luc125

我將在瀏覽器上使用它。現在，我將專注於展望 - 這是我們的目標客戶使用的。歡呼的提示。 – Julie

邊界半徑在電子郵件和瀏覽器中不起作用

回答

相關問題