Yahoo 电子邮件客户端未将 css 应用于具有嵌入式 CSS 的 <img> 元素

Yahoo email client not applying css to <img> element with embedded CSS

提问人：Mario Petrovic 提问时间：7/28/2023 更新时间：7/29/2023 访问量：40

问：

我发送到 Yahoo 客户端的 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 -客户端电子邮件 模板

评论

答：

0赞 Mario Petrovic 7/28/2023 #1

对于 Yahoo 客户端，元素需要具有我们想要应用的 CSS 属性。imgid

解决方案：
我添加了与相同的名称，并且刚刚在CSS中添加了相同的CSS属性。idclass

注意：我保留了类，只是为了确定其他客户端是否弄乱了其他一些元素：
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>

细化
问题在于，Yahoo 客户端剥离了元素的 和 类中引用的 CSS。不知道为什么，但这只发生在这个标签上。image1image2<img>img

大多数电子邮件客户端将嵌入式CSS转移到内联中，而对于雅虎来说，它们似乎没有转移到元素上。<img>

0赞 Md. Rakibul Islam 7/29/2023 #2

是的，你是对的。你需要编写内联CSS。此外，对于大多数电子邮件客户端，始终建议编写基于表格的 html。而且你还必须避免很多不适用于电子邮件的CSS规则。像这里一样，在Outlook中不起作用。因此，在编写 CSS 时，您还可以检查可用于电子邮件的 CSS 属性。border-radius

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

评论

1赞 Mario Petrovic 7/30/2023
谢谢你的报道。不知道border-radius
0赞 Md. Rakibul Islam 7/30/2023
很高兴知道这对:)有所帮助

上一个：Oracle APEX，将图像添加到电子邮件模板 HTML 正文

下一个：电子邮件模板未在带有嵌入式CSS的iCloud客户端上加载