从父元素继承背景颜色而不是 <body>答案

【问题标题】：inherit background color from parent element instead of <body>从父元素继承背景颜色而不是 <body>
【发布时间】：2021-06-16 18:22:09
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div style="background-color: grey" id="parent">
  <div style="background-color: red">
    content
  </div>
  <div style="margin: 10px; padding: 10px; background-color: yellow" id="child">margin and padding</div>
  <div style="background-color: aquamarine">
    aquamarine
  </div>
</div>
</body>
</html>

如果我在浏览器中呈现上面的页面，我会得到以下信息：

注意#parent 元素的背景颜色（灰色）显示在#child 元素的边缘。

但是，如果我在 HTML 电子邮件中使用相同的标记并在 Outlook 中打开它，我会看到这个

在这种情况下，<body> 图像的背景颜色显示在#child 的边距中，而不是父元素的背景颜色。

有没有办法让 Outlook 的行为方式与浏览器相同？

【问题讨论】：

标签： html css outlook

【解决方案1】：

Outlook 使用 Word 呈现邮件正文。在 Word 中，支持部分级联样式表属性的两个 HTML 元素被称为：DIV 和 P。在以下文章中了解有关支持和不支持的 HTML 元素、属性和级联样式表属性的更多信息：

【讨论】：

如果这些页面对我的问题有答案，请您将其包含在您的答案中吗？
您可以将 div 或 p 元素替换为其他元素，例如表格。选择哪种方式取决于您。
好的，但是您能否在回答中至少显示一种可能的解决方案？
我已经解释了为什么它会发生在 Outlook 中，以及为什么浏览器和桌面应用程序之间存在差异。引入哪种解决方案取决于您。
问题是所有信息都在您链接到的页面中，而不是您的答案本身。如果这些链接断开，您的答案将不再有用