Saya mencoba membuat email HTML yang akan ditampilkan dengan benar di semua klien email yang banyak digunakan. Saya membungkus seluruh email dalam sebuah tabel, dan saya ingin itu memiliki lebar hingga 98% dari lebar yang tersedia, tetapi tidak lebih dari 800 piksel. Seperti ini:
<table style="width:98%; max-width:800px;">
Tapi saya tidak melakukannya seperti itu, karena menurut Outlook 2007 ini tidak mendukung properti lebar CSS.
Sebaliknya, saya melakukan ini:
<table width="98%">
Apakah ada cara untuk mengatur lebar-maksimal tanpa bergantung pada CSS?
html
email
html-email
css
Tim Goodman
sumber
sumber
Jawaban:
Ya, ada cara untuk meniru
max-width
menggunakan tabel, sehingga memberi Anda tata letak responsif dan ramah Outlook. Terlebih lagi, solusi ini tidak memerlukan komentar bersyarat.Misalkan Anda ingin setara dengan berpusat
div
denganmax-width
dari350px
. Anda membuat tabel, atur lebarnya menjadi100%
. Tabel ini memiliki tiga sel berturut-turut. Setel lebar tengahTD
ke350
(menggunakanwidth
atribut HTML , bukan CSS), dan begitulah.Jika Anda ingin konten Anda rata kiri, bukan di tengah, biarkan sel kosong pertama.
Contoh:
Di jsfiddle saya memberi batas pada tabel sehingga Anda dapat melihat apa yang terjadi, tetapi jelas Anda tidak menginginkannya di kehidupan nyata:
http://jsfiddle.net/YcwM7/
sumber
style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
<img src="file.jpg" "width="350" alt="" style="display:block;width:100%" />
litmus.com/community/discussions/…Ada trik yang dapat Anda lakukan untuk Outlook 2007 menggunakan komentar html bersyarat.
Kode di bawah ini akan memastikan bahwa tabel Outlook memiliki lebar 800px, bukan lebar maksimalnya tetapi berfungsi lebih baik daripada membiarkan tabel menjangkau seluruh jendela.
sumber
Jawaban singkatnya: tidak.
Jawaban panjangnya:
Format tetap berfungsi lebih baik untuk email HTML. Menurut pengalaman saya, paling baik Anda berpura-pura bahwa itu tahun 1999 dalam hal email HTML. Bersikaplah eksplisit dan gunakan atribut HTML (width = "650") jika memungkinkan dalam definisi tabel Anda, bukan CSS (style = "width: 650px"). Gunakan lebar tetap, tanpa persentase. Lebar meja dengan lebar 650 piksel adalah taruhan yang aman. Gunakan CSS sebaris untuk mengatur properti teks.
Ini bukan masalah apa yang berfungsi di "email HTML", melainkan kebanyakan klien email dan kemampuan mereka yang terbatas (dan terkadang sengaja demikian dalam kasus Gmail, Hotmail, dll) untuk merender HTML.
sumber
Agak terlambat ke pesta, tapi ini akan menyelesaikannya. Saya meninggalkan contoh di 600, karena itulah yang akan digunakan kebanyakan orang:
Mirip dengan contoh Shay kecuali ini juga mencakup lebar maksimal untuk bekerja pada klien lain yang memiliki dukungan, serta metode kedua untuk mencegah perluasan (kueri media) yang diperlukan untuk Outlook '11.
Di kepala:
Di dalam tubuh:
Berikut adalah contoh lain yang digunakan: Email konfirmasi pesanan responsif untuk perangkat seluler?
sumber
Ini adalah solusi yang berhasil untuk saya
https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , terima kasih kepada @ philipp-klinz
sumber
max-width
. Semuanya ini akan menggantikan<div style="max-width: ...px">...</div>
. Untuk email yang saya kerjakan ketika saya menemukan intinya, ini adalah satu-satunya solusi yang membuat segalanya terlihat benar di Outlook 2010, 2013, dan 2016.0px
padding
danmargin
s serta0
cellpadding
dancellspacing
. Mungkin menentukanline-height
akan bekerja sebagai pengganti untukfont-size
mengisi waktuheight
yang tidak dihormati (saya ingin mengujinya pada semuatr
dan kemudian pada semuatd
untuk melihat dengan tepat di mana itu diperlukan). @EdL jika Anda bisa mendapatkan solusi yang lebih ringan yang bekerja sebaik ini yang akan luar biasa - silakan posting di sini dan di inti tertaut itu