雅虎电子邮件客户端未将 CSS 应用于嵌入 CSS 的 <img> 元素

问题描述 投票：0回答：2

我发送到雅虎客户端的 HTML 电子邮件模板没有将 CSS 应用到 

<img>
元素：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .image1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

      .image2 {
        width: 100px;
        height: 50;
        margin: 0 auto;
      }

      .container {
        background: red;
      }
    </style>
  </head>
  <body>
    <img src="someimage1.jpg" class="image1" />

    <div class="container">
      <img src="someimage2.jpg" class="image2" />
    </div>
  </body>
</html>
html css email-client email-templates
2个回答
0
投票

对于雅虎客户端，

img
元素需要具有
id
属性以及我们要应用的CSS。

解决方案：
我添加了与 

id
相同的 
class
名称，并在 CSS 中添加了相同的 CSS 属性。

注意：
我留下了课程，只是为了确定是否有其他客户在其他元素上弄乱了

class
：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .image1,
      #image1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

      .image2,
      #image2 {
        width: 100px;
        height: 50;
        margin: 0 auto;
      }

      .container {
        background: red;
      }
    </style>
  </head>
  <body>
    <img src="someimage1.jpg" class="image1" id="image1" />

    <div class="container">
      <img src="someimage2.jpg" class="image2" id="image2" />
    </div>
  </body>
</html>

详细说明
问题是，雅虎客户端删除了 

image1
和 
image2
元素的 
<img>
类中引用的 CSS。不知道为什么，但这只发生在这个 
img
标签上。

大多数电子邮件客户端将嵌入的 CSS 转移到内联中，而对于雅虎来说，它们似乎没有转移到 

<img>
元素上。

0
投票

是的，你说得对。您需要编写内联 CSS。而且对于大多数电子邮件客户端，始终建议编写基于表格的 html。而且您还必须避免许多不适用于电子邮件的 CSS 规则。像这里一样，

border-radius
在 Outlook 中不起作用。因此，在编写 CSS 时，您还可以检查哪些 CSS 属性可用于电子邮件。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  
<body style="margin: 0; padding: 0;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
          <tr>
            <td>
              <img src="someimage1.jpg" width="100" height="100" style="border-radius: 50%;"/>
            </td>
          </tr>
          
          <tr>
            <td bgcolor="red">
              <img src="someimage2.jpg" width="100" height="50" style="margin: 0 auto;"/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.