O365 MS Teams MessageCard Markdown图片移动端对齐问题求助

问题背景 #

使用传统MessageCard发送至Teams频道连接器，Markdown格式的列表项包含图片时，桌面端和Web端渲染正常，但移动端图片会被放大至约1.5em，对齐方式异常。直接为img标签添加float、display等样式无法生效，推测是Teams移动端对图片应用了优先级更高的块级样式覆盖。

可行解决方案 #

1. 用span包裹图片强制约束尺寸 #

通过inline-block的span标签包裹img，从外层限制显示空间，绕过移动端的样式覆盖：

{
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "title": "title",
    "summary": "summary",
    "markdown": true,
    "text": "# Release Notes\n\nWhat's new:\n\n* <span style=\"display:inline-block; width:16px; height:16px; vertical-align:middle;\"><img style=\"width:100%; height:100%;\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDEuNzc3QzAgLjc5Ni43OTYgMCAxLjc3NyAwaDEyLjQ0NkMxNS4yMDQgMCAxNiAuNzk2IDE2IDEuNzc3djEyLjQ0NmMwIC45ODEtLjc5NiAxLjc3Ny0xLjc3NyAxLjc3N0gxLjc3N0ExLjc3OCAxLjc3OCAwIDAgMSAwIDE0LjIyM1YxLjc3N3oiIGZpbGw9IiNGRjU2MzAiLz48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI4IiBjeT0iOCIgcj0iNCIvPjwvZz48L3N2Zz4=\" /></span> Issue 1\n"
}

2. 尝试Markdown原生图片语法 #

替换HTML img标签为Markdown图片语法，部分场景下可避开移动端样式干扰：

* ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDEuNzc3QzAgLjc5Ni43OTYgMCAxLjc3NyAwaDEyLjQ0NkMxNS4yMDQgMCAxNiAuNzk2IDE2IDEuNzc3djEyLjQ0NmMwIC45ODEtLjc5NiAxLjc3Ny0xLjc3NyAxLjc3N0gxLjc3N0ExLjc3OCAxLjc3OCAwIDAgMSAwIDE0LjIyM1YxLjc3N3oiIGZpbGw9IiNGRjU2MzAiLz48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI4IiBjeT0iOCIgcj0iNCIvPjwvZz48L3N2Zz4=){:width="16px" height="16px"} Issue 1

注：该语法的兼容性在Teams中有限，需实际测试验证。

3. 切换至Adaptive Card（推荐） #

MessageCard属于旧版格式，Teams移动端对其样式支持不完善。改用Adaptive Card可实现跨客户端一致的布局控制，通过ColumnSet和Image组件精准对齐图标与文本：

{
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "size": "Large",
            "weight": "Bolder",
            "text": "Release Notes"
        },
        {
            "type": "TextBlock",
            "text": "What's new:",
            "spacing": "Small"
        },
        {
            "type": "ColumnSet",
            "spacing": "Small",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDEuNzc3QzAgLjc5Ni43OTYgMCAxLjc3NyAwaDEyLjQ0NkMxNS4yMDQgMCAxNiAuNzk2IDE2IDEuNzc3djEyLjQ0NmMwIC45ODEtLjc5NiAxLjc3Ny0xLjc3NyAxLjc3N0gxLjc3N0ExLjc3OCAxLjc3OCAwIDAgMSAwIDE0LjIyM1YxLjc3N3oiIGZpbGw9IiNGRjU2MzAiLz48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI4IiBjeT0iOCIgcj0iNCIvPjwvZz48L3N2Zz4=",
                            "width": "16px",
                            "height": "16px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Issue 1",
                            "wrap": true,
                            "verticalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}

验证方式 #

使用原curl命令替换对应的卡片JSON内容，发送到Teams频道连接器，分别在桌面/Web端和移动端测试渲染效果：

curl -H 'Content-Type: application/json' -d "@teams_card.json" https://<company>.webhook.office.com/webhookb2/<id path>

内容的提问来源于stack exchange，提问作者jdi