Как сделать ширину и высоту элемента а в письме?

Question

[musya1453]

Приветствую. Столкнулся с такой проблемой при верстке письма. вот изображение.
это 4 ссылки. первая ссылка(которая корявая) должна выглядеть как правые три. но вот правые сделаны неправиль ибо вся зеленая зона не кликабельна. подскажите как это исправить и сделать все поле кликабельным.

Answer 1

[Pavel Shvedov]

display: inline-block? И выставлять ширину и высоту как у блочного элемента? https://jsfiddle.net/q8nada5p/

Comments

[musya1453]

в Outlook не принимает inline-block

[Pavel Shvedov]

А display: block; float: left; ???

[Pavel Shvedov]

https://jsfiddle.net/q8nada5p/1/

[musya1453]

все же в outlook не видит ни ширину ни флоат. также инлайновый остался

[Pavel Shvedov]

musya1453: Значит пришло время костылей - сделайте ссылки картинками?)

[musya1453]

данный вариант рассматривался) но заказчик отказался(ибо текст должен меняться)

Answer 2

[Артур Кох]

В принципе никак. Тут есть несколько моментов:
- поддержка inline-block в почтовых клиентах под большим вопросом
- если не запариваться на тач устройства, то можно просто сделать зеленую ячейку таблицы и вставить в нее белую текстовую ссылку
- если все же вся область должна быть кликабельна, что важно для тач экранов, то лучше сверстать это картинкой, которую надо запихнуть в ссылку