Саморазрывная строка меню в Outlook - PullRequest
Новая
       88

Саморазрывная строка меню в Outlook

0 голосов
/ 27 мая 2020

У нас есть письмо шириной 560 пикселей, которое динамически создается с помощью XSLT 1.0. В верхней части этого письма я получил меню навигации, которое автоматически вычисляет ширину для каждого пункта меню, разделив 560 пикселей на количество пунктов меню в этой строке.

Пункты меню автоматически получают свою ширину в своей строке стиль через XSLT. Вот наш результат: 

                        <table style="width:560px;background-color:#f7e1e3;margin-bottom:0;border-collapse:collapse;border:0;padding:0px;margin-top:0;border-spacing:0px;">
                       <tr>
                          <td style="width:560px;padding:0!important;margin:0!important;display:block;word-spacing:-1;font-size:0px;" width="560">
                             <div width="186" class="nav-menu-item mobileFontSize" style="float:left;width:186px;height:20px;display:inline-block;overflow:hidden;text-align:center;border:0;margin:0;padding-bottom:5px;padding-top:5px;"><a href="http://demov2.paradesk.nl/" style="font-size:18px;">home</a></div>
                             <div width="186" class="nav-menu-item mobileFontSize" style="float:left;width:186px;height:20px;display:inline-block;overflow:hidden;text-align:center;border:0;margin:0;padding-bottom:5px;padding-top:5px;"><a href="http://demov2.paradesk.nl/" style="font-size:18px;">vrouw</a></div>
                             <div width="186" class="nav-menu-item mobileFontSize" style="float:left;width:186px;height:20px;display:inline-block;overflow:hidden;text-align:center;border:0;margin:0;padding-bottom:5px;padding-top:5px;"><a href="http://demov2.paradesk.nl/" style="font-size:18px;">trans</a></div>
                             <div width="280" class="nav-menu-item mobileFontSize" style="float:left;width:280px;height:20px;display:inline-block;overflow:hidden;text-align:center;border:0;margin:0;padding-bottom:5px;padding-top:5px;"><a href="http://demov2.paradesk.nl/" style="font-size:18px;">qallemal</a></div>
                             <div width="280" class="nav-menu-item mobileFontSize" style="float:left;width:280px;height:20px;display:inline-block;overflow:hidden;text-align:center;border:0;margin:0;padding-bottom:5px;padding-top:5px;"><a href="http://demov2.paradesk.nl/" style="font-size:18px;">godverdomme</a></div>
                          </td>
                       </tr>
                    </table>

2 Это делает эту задачу очень сложной:

  • Outlook не поддерживает элемент «div» и не поддерживает отображение: inline -block;
  • Каждое меню должно состоять из одинаковых HTML. Разрешается изменять только ширину.
  • Мы не можем построить таблицу и просто использовать 2 строки, чтобы разбить ее.

Любые предложения приветствуются, мы уже занимались этим довольно долго.

Ура!

...