มี CSS max-width ที่เทียบเท่ากับอีเมล HTML หรือไม่

116

ฉันกำลังพยายามสร้างอีเมล HTML ที่จะแสดงอย่างถูกต้องในโปรแกรมรับส่งเมลที่ใช้กันอย่างแพร่หลายทั้งหมด ฉันกำลังรวมอีเมลทั้งหมดไว้ในตารางและฉันต้องการให้มีความกว้างไม่เกิน 98% ของความกว้างที่มี แต่ไม่เกิน 800 พิกเซล แบบนี้: <table style="width:98%; max-width:800px;">

แต่ฉันไม่ได้ทำแบบนั้นเนื่องจากตาม Outlook 2007 นี้ไม่รองรับคุณสมบัติความกว้าง CSS

ฉันกำลังทำสิ่งนี้แทน: <table width="98%">

มีวิธีใดบ้างในการตั้งค่าความกว้างสูงสุดโดยไม่ต้องอาศัย CSS?

— ทิมกู๊ดแมน
แหล่งที่มา

1

ฉันได้อัปเดตคำตอบที่ได้รับการยอมรับจาก @MarkNugent เนื่องจากดูเหมือนว่าจะได้รับความเห็นพ้องกัน - แม้ว่าจะสายไป 4 ปีแล้วก็ตามที่จะเป็นประโยชน์กับฉัน :)

— Tim Goodman

227

ใช่มีวิธีการเลียนแบบmax-widthโดยใช้ตารางซึ่งทำให้คุณมีทั้งรูปแบบที่ตอบสนองและเป็นมิตรกับ Outlook ยิ่งไปกว่านั้นโซลูชันนี้ไม่ต้องการความคิดเห็นแบบมีเงื่อนไข

สมมติว่าคุณต้องการให้เทียบเท่าของศูนย์กลางdivที่มีของmax-width คุณสามารถสร้างตารางกำหนดความกว้างของการ350px 100%ตารางมีสามเซลล์ในแถว ตั้งค่าความกว้างของศูนย์TDเป็น350(โดยใช้widthแอตทริบิวต์HTML ไม่ใช่ CSS) แล้วไปที่นั่น

หากคุณต้องการให้เนื้อหาของคุณจัดชิดซ้ายแทนที่จะจัดกึ่งกลางให้ปล่อยเซลล์ว่างแรกออก

ตัวอย่าง:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table>

ใน jsfiddle ฉันให้เส้นขอบตารางเพื่อให้คุณเห็นว่าเกิดอะไรขึ้น แต่เห็นได้ชัดว่าคุณไม่ต้องการสิ่งใดสิ่งหนึ่งในชีวิตจริง:

http://jsfiddle.net/YcwM7/

— มาร์คนูเจนต์
แหล่งที่มา

18

นี่คือคำตอบที่ดีที่สุดสำหรับทุกคน ^^^. ละเว้นคำตอบที่ยอมรับและคำตอบแบบมีเงื่อนไข

— Nick Manning

4

เพียงเพื่อช่วยชีวิตคนอื่นบ้างจำเป็นต้องมีองค์ประกอบ <td> ว่างเหล่านั้นอย่างน้อยหนึ่งองค์ประกอบมิฉะนั้น <td> ที่มีเนื้อหาจะยืดออกเพื่อเติมเต็ม <tr> ทั้งหมด แต่นี่เป็นทางออกที่ดีที่สุดของข้อเสนอ

— Chris Strickland

2

@Phyllis Sutherland คุณอาจลองลบขนาด img แบบอินไลน์และแทนที่โดย:

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;"

— morespace54

5

ระวังอย่าเพิ่มหน่วยความกว้างด้านในเหมือนที่ฉันทำไม่งั้นมันไม่ได้ผล! คืออย่าทำ width = "

— 350px

3

@PhyllisSutherland พบการแก้ไขสำหรับภาพ: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…

— cbron

35

มีเคล็ดลับที่คุณสามารถทำได้สำหรับ Outlook 2007 โดยใช้ความคิดเห็น html แบบมีเงื่อนไข
โค้ดด้านล่างนี้จะตรวจสอบให้แน่ใจว่าตาราง Outlook มีความกว้าง 800px ไม่ใช่ความกว้างสูงสุด แต่จะทำงานได้ดีกว่าการปล่อยให้ตารางครอบคลุมทั้งหน้าต่าง

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>

— Shay Erlichmen
แหล่งที่มา

6

ข้อเสนอแนะที่ยอดเยี่ยม แต่เนื่องจากเป็นตัวเลือกรหัสไม่ใช่คลาสคุณจึงประหยัดการพิมพ์บางส่วนโดยใช้ความกว้าง attr ในองค์ประกอบตาราง

— Steve Wasiura

นี่มันเยี่ยมมาก ยกเว้นปัญหาเดียวโดยการตั้งค่าความกว้าง Outlook จะไม่ยอมให้อีเมลย่อขนาดเล็กกว่าขนาดที่กำหนด หากไม่ตั้งค่าความกว้างอีเมลจะขยายเต็มหน้าจอ เลือกพิษของคุณ :)

— ผู้ประสานงาน

13

คำตอบสั้น ๆ : ไม่

คำตอบยาว:

รูปแบบคงที่ทำงานได้ดีขึ้นสำหรับอีเมล HTML จากประสบการณ์ของฉันคุณควรแกล้งทำเป็นว่าเป็นปี 1999 เมื่อพูดถึงอีเมล HTML มีความชัดเจนและใช้แอตทริบิวต์ HTML (width = "650") เท่าที่จะเป็นไปได้ในคำจำกัดความตารางของคุณไม่ใช่ CSS (style = "width: 650px") ใช้ความกว้างคงที่ไม่มีเปอร์เซ็นต์ ความกว้างของโต๊ะกว้าง 650 พิกเซลเป็นเดิมพันที่ปลอดภัย ใช้ CSS แบบอินไลน์เพื่อตั้งค่าคุณสมบัติข้อความ

ไม่ใช่เรื่องของสิ่งที่ใช้ได้ผลใน "อีเมล HTML" แต่เป็นไคลเอนต์อีเมลที่มีอยู่มากมายและมีจำนวน จำกัด (และบางครั้งก็จงใจเช่นนั้นในกรณีของ Gmail, Hotmail และอื่น ๆ ) ความสามารถในการแสดง HTML

— Diodeus - เจมส์ MacFarlane
แหล่งที่มา

ใช่นั่นคือสิ่งที่ฉันคาดหวัง แต่ฉันคิดว่าฉันจะถาม

— Tim Goodman

35

การตั้งค่าความกว้างคงที่ 650 จะทำให้อีเมลของคุณดูแย่มากในโปรแกรมรับส่งเมลบนมือถือ

— DrewB

6

-1: ดูแย่มากเพราะอุปกรณ์พกพามีขนาดค่อนข้างเล็กในโลกแห่งความเป็นจริง ซึ่งหมายความว่าหากไม่มีการซูมและการแพนข้อความในงานออกแบบของคุณจะมีขนาดเล็กจนไม่สามารถอ่านได้ ลองดูที่คู่มือการตรวจสอบแคมเปญการออกแบบอีเมลตอบสนอง

— Karl Horky

1

-1 เพราะฉันเพิ่งจัดการกับสิ่งนี้ในไคลเอนต์มือถือเช่นกันและการมีความกว้างคงที่ก็เป็นปัญหาของฉัน

— Brian FitzGerald

7

ปีคือ 2015 อุปกรณ์เคลื่อนที่มีอยู่ทั่วไป คุณกำลังบอกว่าจะลืมเกี่ยวกับอุปกรณ์มือถือสำหรับมุมมองที่โง่? ฉันบอกว่าลืมเกี่ยวกับมุมมอง และผลิตภัณฑ์อื่น ๆ จาก Microsoft

— refaelio

5

ไปงานปาร์ตี้ช้าไปหน่อย แต่จะทำให้เสร็จ ฉันปล่อยตัวอย่างไว้ที่ 600 เพราะนั่นคือสิ่งที่คนส่วนใหญ่จะใช้:

เช่นเดียวกับตัวอย่างของ Shay ยกเว้นสิ่งนี้ยังรวมถึงความกว้างสูงสุดเพื่อทำงานกับไคลเอนต์ที่เหลือที่มีการสนับสนุนเช่นเดียวกับวิธีที่สองในการป้องกันการขยาย (คิวรีสื่อ) ซึ่งจำเป็นสำหรับ Outlook '11

ในหัว:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

ในร่างกาย:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

นี่คืออีกตัวอย่างหนึ่งของการใช้งานนี้: อีเมลยืนยันคำสั่งซื้อที่ตอบสนองสำหรับอุปกรณ์มือถือ?

— จอห์น
แหล่งที่มา

0

นี่คือวิธีแก้ปัญหาที่ได้ผลสำหรับฉัน

https://gist.github.com/elidickinson/5525752#gistcomment-1649300ขอบคุณ@ philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

— เฮนรี่
แหล่งที่มา

คุณช่วยยกตัวอย่างที่กระชับกว่านี้ได้ไหมมีหลายสิ่งในนั้นที่ไม่จำเป็นสำหรับการแก้คำถาม

— EdL

@EdL ความคิดที่ว่าเป็นmax-widthวิธีที่รัดกุมมากที่สุดในการได้รับอีเมลง่าย <div style="max-width: ...px">...</div>สิ่งนี้ทั้งหมดจะเข้ามาแทนที่ สำหรับอีเมลที่ฉันกำลังดำเนินการเมื่อพบส่วนสำคัญนี้นี่เป็นทางออกเดียวที่ทำให้สิ่งต่างๆดูถูกต้องใน Outlook 2010, 2013 และ 2016

— henry

@ เมื่อฉันอ้างถึงแอตทริบิวต์ขนาดตัวอักษรของ cellpadding ทั้งหมดเป็นต้นรูปภาพเป็นสิ่งที่ยุ่งยากเพราะถ้าคุณไม่ระบุ width = "500" เป็นแอตทริบิวต์โดยที่ 500 คือความกว้างในพิกเซล Outlook จะทำให้รูปภาพมีขนาดเต็ม ( wrt. ไฟล์รูปภาพ) ซึ่งโดยทั่วไปจะส่งผลให้มีความกว้างคงที่

— EdL

ปล่อยให้เป็นเพราะมันไม่ใช่รหัสของฉัน - ฉันแค่อ้างจากส่วนสำคัญ - แต่ฉันได้ตั้งเป็นวิกิชุมชนแล้ว ผมเชื่อว่ามันเป็นสิ่งจำเป็นที่จะระบุอย่างชัดเจน0px paddingและmarginS รวมทั้ง0 cellpaddingcellspacingและ เป็นไปได้ว่าการระบุline-heightจะใช้แทนfont-sizeการกรอกเวลาที่heightไม่ได้รับการเคารพ (ฉันต้องการทดสอบในทุกtrs แล้วทุกอย่างtdเพื่อดูว่าจำเป็นตรงไหน) @EdL ถ้าคุณสามารถหาวิธีแก้ปัญหาที่เบากว่าที่ใช้งานได้และสิ่งนี้จะยอดเยี่ยม - โปรดโพสต์ไว้ที่นี่และในส่วนสำคัญที่เชื่อมโยง

— henry