Есть ли обходной путь для макса максимальной ширины css для Outlook Web Access IE11?

Question

При разработке адаптивного электронного письма обычно используют условное HTML-кодирование, ориентированное на Outlook и IE, чтобы обойти тот факт, что оно не распознает свойство max-width и вместо этого отображает все электронное письмо на ширине 100%, что нарушает дизайн (простой пример в конце этого вопроса).

Internet Explorer 10 и 11 не отображают этот условный html. Существует ли способ создания адаптивного макета электронной почты, подобного этому (который может быть ограничен меньшей шириной на больших устройствах и пропорционально уменьшен на меньших экранах), который правильно отображается при использовании Outlook Web Access в IE 10/11?

Я пытался найти решение, но не смог найти ничего, что бы решало тот факт, что IE10 / 11 игнорирует условный html.

<style>
/* General Resets */
body {
    margin: 0 !important;
    padding: 0;
    background-color: #ffffff;
}
table {
    border-spacing: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
td {
    padding: 0;
}
p {
    Margin-bottom: 12px;
}
div[style*="margin: 16px 0"] {
    margin:0 !important;
}

/* Default Text Styles */
body, table .body, th, h1, h2, h3, h4, h5, h6, td, p, strong {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45em;
    font-weight: normal;
    color: #333;
    text-align: left;
    mso-line-height-rule: exactly;
}
th, strong {
    font-weight: 600;
}
.h1 {
    font-size: 21px;
    font-weight: 600;
    Margin-bottom: 18px;
}
.h2 {
    font-size: 18px;
    font-weight: 600;
    Margin-bottom: 12px;
}
.h3 {
    font-size: 15px;
    font-weight: 600;
    Margin-bottom: 11px;
}
a {
    color: #3696C2;
    text-decoration: underline solid #3696C2;
}

/* Responsive wrappers */
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
    margin: 0 auto;
}
.outer {
    Margin: 0 auto;
    width: 100%;
    max-width: 600px;
}

/* Outer wrapper for each column block */
.inner {
    padding: 10px;
}
/* Contents wrapper for each column block */
.contents {
    width: 100%;
    text-align: left;
}

/* Image Resets */
.full-width-image,
.header-logo,
.inner-image {
    mso-line-height-rule: at-least;
    text-align: center;
}
img {
    display: block;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

/* Default One Column layout */
.one-column .contents {
    text-align: left;
}
.one-column p {
    Margin-bottom: 10px;
}
.full-width-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Default Two Column layout */
.two-column {
    text-align: center;
    font-size: 0;
}
.two-column .column {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}
.two-column .equal {
    max-width: 300px;
}
.two-column .small {
    max-width: 100px;
}
.two-column .large {
    max-width: 500px;
}
.two-column .contents {
    font-size: 14px;
    text-align: left;
}
.two-column .inner-image {
    text-align: center;
}
.equal img {
    width: 100%;
    max-width: 280px;
    height: auto;
}
.small img {
    width: 100%;
    max-width: 80px;
    height: auto;
}
.large img {
    width: 100%;
    max-width: 480px;
    height: auto;
}
.two-column .text {
    padding-top: 10px;
}
</style>
<!-- Start Content Wrapper -->
<center class="wrapper">
    <div class="webkit">
        <!--[if (gte mso 9)|(IE)]>
        <table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
            <tr>
                <td>
        <![endif]-->
        <table cellpadding="0" cellspacing="0" border="0" class="outer" align="center">
    <!-- Start Content -->
            <tr>
                <td class="one-column">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td align="center" class="inner contents">
                                <p class="h1"></p>
                                <p></p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="two-column">
                    <!--[if (gte mso 9)|(IE)]>
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td width="50%" valign="top">
                    <![endif]-->
                    <div class="column equal">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td class="inner">
                                    <table cellpadding="0" cellspacing="0" border="0" class="contents">
                                        <tr>
                                            <td class="inner-image">
                                                <img src="" width="280px" alt="" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                            <td width="50%" valign="top">
                    <![endif]-->
                    <div class="column equal">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td class="inner contents">
                                    <p class="h2"></p>
                                    <p></p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                        </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
    <!-- End Content -->
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
            </tr>
        </table>
        <![endif]-->
    </div>
</center>
<!-- End Content Wrapper -->