为何Gmail中cursor:pointer CSS样式不生效？寻求解决方案

嘿，这个问题我之前帮好几个开发者踩过坑——Gmail的邮件渲染引擎对原生<button>标签的CSS支持一直很有限，像cursor:pointer这类属性经常会被它直接过滤掉，而且<button>在不同邮箱客户端的表现差异也很大。

给你两个核心解决思路，亲测有效：

1. 用<a>标签替代<button>来模拟按钮 #

Gmail对<a>标签的样式兼容性要好得多，而且<a>本身默认就是指针光标，我们只需要把按钮的样式直接应用到<a>上，同时明确加上cursor:pointer即可。注意要给<a>设置display:inline-block，因为行内元素没法正确识别padding、border-radius这类块级样式。

2. 修改后的代码示例 #

$mail->isHTML(true); 
$mail->Body=' 
<a href="#" style="display: inline-block; border: 1px solid transparent; cursor: pointer; padding: 10px 60px; border-radius: 3px; color: #fff; background-color: #1b84e7; background-image: linear-gradient(to right,#1b84e7 0%,#1515af 100%); text-decoration: none;">
    Approve Incident
</a> '; 

if(!$mail->send()) { 
    echo 'Message could not be sent.'; 
    echo 'Mailer Error: ' . $mail->ErrorInfo; 
} else { 
    echo 'Message has been sent'; 
}

额外提醒 #

• HTML邮件必须全部使用inline样式，Gmail几乎不支持内部<style>标签或外部样式表；
• 尽量避免使用复杂的HTML元素（比如<button>、<div>的复杂嵌套），优先用<a>、<table>这类兼容性好的元素；
• 如果需要更复杂的按钮样式，可以用table来构建，但对于这个需求，用<a>模拟完全足够。

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