클라이언트 간 HTML 전자 메일에서 요소를 겹치게 만드시겠습니까?

브라우저 용 일반 HTML에서 요소를 겹치게 만드는 것이 쉽습니다.클라이언트 간 HTML 전자 메일에서 요소를 겹치게 만드시겠습니까?

그러나 Outlook에서 렌더링 엔진을 의 MS Word에서 사용하기 때문에 모토가 "1996과 비슷한 코드"인 HTML 이메일의 어두운 세상에서 Gmail은 거의 모든 것을 제거합니다. 두 가지 요소를 만드는 모든 방법이 겹칩니다. 의 불량으로 인한 클라이언트 지원에 적합하다고 생각 :

Position

position: absolute;

position: relative;

top

left

right

Gmail 및 기타 업체에서 음수 마진이 삭제되었습니다. 따라서 부정적인 여백은 없습니다. 아주 잘 <img> 태그 모든 명시 적 높이와 폭 어디서 레이아웃을 필요로 할 때 작동하지 않는 요소의 내용의 크기보다 작 overflow: visible;과 요소에서 '오버행'와 너비와 높이를 사용
인해 float 지원이 부족하고 이상한 처리가 <div>s, 대부분 by necessity need to be based on tables입니다.

배경 이미지

아무것도
도하려고 생각하지 말고,이 Gmail에서 제거 할 때 옵션 등입니다 (무엇이든 가능한 경우 말했다,이에 따라 일이 가장 가능성이 옵션처럼 보인다) HTML 이메일에서 CSS3 또는 자바 스크립트를 사용하는 방법 ...

클라이언트 간 HTML 전자 메일에서 요소간에 겹침을 만드는 데 사용할 수있는 것이 있습니까? 그리고/또는 요소를 이웃들의 위치에 영향을주지 않으면 서 경계 상자에서 확장시키는 방법은 무엇입니까?

예를 들어

, 당신은 (점선 및 경계 상자를 보여주는 배경) 큰 이미지 그것을 아래로 밀어보다는 아래를 통해 행을 중단, ... 이런 식으로 뭔가를하고 싶어한다고 가정

enter image description here

요소 (이 경우에는 이미지 일 필요는 없지만이 이미지의 경우는 아님)는 다른 요소 (이 경우 행 아래에 있지만 별도의 행은 아니더라도)와 겹치지 않고 겹칩니다.

주요 클라이언트 호환성 문제없이이를 수행 할 수있는 방법이 있습니까?

편집 : 그냥 찾았습니다 this piece of crazy twisted genius : colspans 및 rowspans를 사용하여 표 셀을 중첩합니다. 이것은 옵션 일 수 있지만, 이전의 경험이나 연구에서 얻은 정보는 환영받습니다.

우리가 우리의 고객이 사용됩니다 어떤 클라이언트 예측할 수있는 뉴스 레터를 만들고있어 가정, 그래서 우리는 인기있는 주류 이메일 클라이언트 지원해야 : 아웃룩, Gmail은, 야후, 핫메일, 썬더 버드, 아이폰 OS를/OSX, 안드로이드 ...

출처

2013-01-15 user568458

겹쳐진 테이블 셀 트릭이 Microsoft Outlook 2007 이상 버전 (Word 렌더링 엔진을 사용하는 버전)에서 작동하지 않는다고 들었습니다. 지금은 테스트 할 수 없으며 확인 또는 논평을 부탁드립니다. – user568458

슬프게도 - 2007 년 또는 2010 년에이 트릭이 작동하지 않는다는 것을 확인할 수 있습니다. –

backgrounds.cm 기법을 사용하는 경우 99 %의 이메일 클라이언트에서 배경 이미지가 작동합니다. imgs 및 라이브 콘텐츠 영역이있는 테이블 슬라이스가 가장 좋지만 특히 이미지가 차단 된 경우 폭발 할 수 있습니다. – Gortonington

대부분의 상황에서 천재 솔루션이 효과적이었습니다. 그러나 Outlook 2007, 2010 및 2013의 경우 열 행이 삭제되기 때문에 작동하지 않았습니다.

출처

2013-04-26 07:35:33 user2322774

Outlook에서는 삭제하지 않으며 첫 번째 행에 걸쳐 있으면 너비를 고려하지 않습니다. 자세한 내용은 아래 답변 또는 [this link] (http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122)를 참조하십시오. – John

다소 늦은 대화이지만, 찾고있는 기술은 this similar answer입니다.

그러나 행과 열 모두에 걸쳐 있으므로 예제는 훨씬 복잡합니다. 나는 도전하고있다 :

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr><!-- This row is needed to enforce col widths in Outlook --> 
    <td width="100"> 
    </td> 
    <td width="300"> 
    </td> 
    <td width="200"> 
    </td> 
    </tr> 
    <tr> 
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb"> 
     Title Here 
    </td> 
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd"> 
     Image Here 
    </td> 
    </tr> 
    <tr> 
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc"> 
     Column<br>...<br>...<br>... 
    </td> 
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa"> 
     Heading 1 
    </td> 
    </tr> 
    <tr> 
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee"> 
     Content<br>...<br>...<br>... 
    </td> 
    </tr> 
</table>

이것은 당신이 얻는만큼 가깝다. 사각형이 아닌 사각형을 만들 수 없으므로 본문의 맨 위 머리글이 자체 셀에 있어야합니다.

출처

2014-03-21 18:03:36 John

클라이언트 간 HTML 전자 메일에서 요소를 겹치게 만드시겠습니까?

답변

관련 문제