2012-08-09 22 views
14

आउटलुक 2013 के परीक्षण संस्करण में, HTML ईमेल में छवियों को बहुत अजीब रूप से प्रदर्शित किया जा रहा है। जहां तक ​​मैं परीक्षण के माध्यम से समझ सकता हूं, ऐसा लगता है कि 20 पिक्सल लंबा से कम छवियों को पैडिंग को 20 पिक्सेल लंबा बनाने के लिए जोड़ा गया है। क्या ऐसा कुछ है जो मैं इसे बदलने के लिए कर सकता हूं? ये ईमेल Outlook 2010 में ठीक दिखते हैं और हर जगह मैं उनका परीक्षण कर रहा हूं।मैं Outlook 2013 में छवि प्रदर्शन को कैसे ठीक कर सकता हूं?

मैं तालिका सेल वे में हैं की ऊंचाई (height="13" के माध्यम से के साथ-साथ इनलाइन सीएसएस) के साथ-साथ तालिका और तालिका पंक्ति वे में हैं बदल रहा है की कोशिश की है, कोई लाभ नहीं हुआ सब। निम्नलिखित कोड जो कुछ इस मुद्दे से चलाता है की एक सरल उदाहरण है, कि आप छवि के ऊपर सेल की लाल रंग की पृष्ठभूमि को देखने के लिए सक्षम हो जाएगा:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td> 
    </tr> 
</table> 
</body> 
</html> 

किसी को भी मदद कर सकते हैं?

उत्तर

20

td टैग के लिए एक line-height शैली जोड़ें (और अच्छा उपाय है, साथ ही td टैग के लिए एक height विशेषता जोड़)।

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;"> 
     <img src="..." alt="" width="195" height="13" style="display:block;" /> 
    </td> 
    </tr> 
</table> 

संशोधित कोड Outlook के सभी संस्करणों के लिए लिटमस में ठीक से परीक्षण किया गया।

+0

बहुत बढ़िया! आश्चर्यजनक! –

+0

आप पुरुषों के बीच एक भगवान हैं। – GhostInTheSecureShell

+0

आपको वास्तव में बहुत धन्यवाद – Nickool

0

सेल-पैडिंग निकालें, यह आपको लाल बीजी नहीं दिखाई देगा।

+0

मैं 'सेलपैडिंग = "0' 'के अलावा, मैं पहले से ही टैग टैग के भीतर ऐसा कैसे करूं? –

-1

किसी भी छवि टैग में style="display:block;" जोड़ें। <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

यह अतिरिक्त पैडिंग को हटा देगा।

0

मुझे पता चला कि <font size="1"><img /></font> भी समस्या को ठीक करने के लिए काम करता है।