Html is rendering differently in mail clients

问题

<html>
<head>
<script>

</script>
<style>
button:hover {
    background-color: #00ffff;
    color: #00ffff;
    font-style: italic;
}

table {
    border-collapse: collapse;
}

#th1 {
    width: 5cm;
    height: 1cm;
    text-align: center;
    background-color: #00ffff;
    border: 2px solid;
}

#td1 {
    text-align: center;
    background-color: #00ffff;
    border: 2px solid;
}

a:link, a:visited {
    background-color: #999999;
    color: #ffffe6;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: #2eb82e;
    color: #ffffe6
}

a.rejectBtn:hover, a.rejectBtn:active {
    background-color: #ff0000;
    color: #ffffe6
}
</style>
</head>
<body style='background-color: #ffffe6; color: #0000'>
    <div style='border: 2px solid black; background-color: #ffffe6;'>
        <table>
            <tr>
                <td><p>
                        <br> <br>&nbsp; &nbsp; &nbsp;Hello <b>5645<b><br>
                                <br>
                    </p></td>
            </tr>
            <tr>
                <td><p>&nbsp; &nbsp;&nbsp;&nbsp;56456-636 has submitted a
                        leave request today with the following details :</p> <br> <br></td>
            </tr>
        </table>
        <table border='border' style='margin: 0px auto;'>
            <tr
                style='width: 5cm; height: 1cm; text-align: left; background-color: #009999; border: 2px solid; color: white;'>
                <th style='width: 4cm;'><center>Leave From</center></th>
                <th style='width: 4cm;'><center>Leave To</th>
                <th style='width: 4cm;'><center>Number of Days</th>
                <th style='width: 4cm;'><center>Reason</th>
                <th style='width: 4cm;'><center>Leave Type</th>
            </tr>
            <tr
                style='width: 5cm; height: 1cm; text-align: left; background-color: #9f9fdf; border: 2px solid; color: white;'>
                <td><center>45 6756</td>
                <td><center>7567 67567</td>
                <td><center>57</td>
                <td><center>675</td>
                </td>
                <td><center>675</td>
            </tr>
            <table style='margin: 0px auto;'>
                <tr>
                    <td style='border: none; background-color: #ffffe6; width: 3cm;'><br>
                        <br> <a href='546456'><b>Approve<b></a></td>
                    <td style='border: none; background-color: #ffffe6; width: 3cm;'><br>
                        <br> <a
                        href='http://www.w3schools.com/colors/colors_picker.asp'
                        class='rejectBtn'><b>Reject<b></a></td>
                </tr>
            </table>
            <br>
            <br>
            <br>
            <center>
                <b>Click on above Approve/Reject button to Approve/Reject this
                    leave request or login to https://my.thbs.com to Approve/Reject the
                    same.</b>
            </center>
            <br>
            <br>
            <br>
            <br>
            <div style='margin-left: 1cm; color: black'>
                Regards,<br>MIS<br> <br> <b style='color: red'>Note:</b>
                The purpose of this email is to Approve/Reject a request directly
                through mailbox reducing the effort to login to https://my.thbs.com
                This is an auto generated email.Please do not reply or forward this
                Email as the information inside this email is not supposed to be
                disclosed.Incase of FWD then recipient can also Approve/Reject the
                request. <br> <br>
            </div>
            </div>
</body>
</html>

I have above piece of code when i am sending this mail to outlook,mac mail and gmail its rendering differently ,can anyone tell me what piece of code i shold change or not use so that mail display is uniform all across the browsers and mail clients.

images are here

outlook

gmail

来源：https://stackoverflow.com/questions/37297413/html-is-rendering-differently-in-mail-clients

标签

html

css

macos

outlook