분할 이미지가 포함 된 iPhone의 이메일 메시지에 흰색 줄이 표시

Question

모바일 장치 용 전자 메일의 크기는 조정되지만 텍스트 크기는 유지되는 전자 메일 메시지의 코드 스 니펫을 발견했습니다.

이미지 위에 텍스트가있는 전자 메일 메시지에는 분할 이미지를 사용합니다. 문제는 tr 명령에서 이미지에 흰 선이 나타납니다. 머리글에서 다음 코드를 제거하면 이미지에 흰색 선이 표시되지 않습니다. 코드를 다시 추가하면 iPhone 또는 Droid에서 이메일을 볼 때 흰색 선을 제거 할 수 없습니다. 모든 이메일 클라이언트의 데스크톱/노트북에 완벽하게 표시됩니다.

다음은 헤드 섹션에 삽입 한 코드입니다.

<style type="text/css"> @media only screen and (max-width: 600px) 
    {/*CSS styles here will be applied on supporting mobile devices*/ 
    table, div {width:100% !important; max-width: 600px !important; position:relative !important; height:auto !important; overflow:hidden !important; top:0px !important;} 
    img {max-width:100%; height: auto !important;}} 
</style> 

흰 선을 제거하는 방법에 대한 제안 사항이 있으십니까?

Answer 1

이미지 태그에 display:block;을 사용해보세요.

Answer 2

위치 : 상대적으로 이상하게 보입니다. 나는 또한 당신이 높이를 지정할 필요가 있다고 생각하지 않는다 : auto! important;

당신이 당신의 이미지를 반응 만들려고 노력하는 경우, 그것의, 즉 항상 100 %의 폭은 그냥 폭 = "100 %를 지정하고 높이 사양을 남길 수 있습니다 컨테이너 요소입니다. 그것은 적절한 비율의 조정됩니다.

그냥 인스턴스 아이폰 등 모바일 기기에 크기 조정에서 이미지 위에 텍스트를 중지하는 몇 가지 코드가 필요한 경우

이 내가 무엇을 사용하고 있습니다

div, p, a, li, td { -webkit-text-size-adjust:none; } 
    #outlook a {padding:0;} /* Force Outlook to provide a "view in 
browser" menu link. */ 
    html{width: 100%; } 
    body{width:100% !important; -webkit-text-size-adjust:100%; 
-ms-text-size-adjust:100%; margin:0; padding:0;} 
    /* Prevent Webkit and Windows Mobile platforms from changing 
default font sizes, while not breaking desktop design. */ 
    .ExternalClass {width:100%;} /* Force Hotmail to display emails at 
full width */ 
    .ExternalClass, .ExternalClass p, .ExternalClass span, 
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* 

Hotmail to display normal line spacing. */ 
    .backgroundTable {margin:0; padding:0; width:100% !important; 
line-height: 100% !important;} 
    img {outline:none; text-decoration:none;border:none; 
-ms-interpolation-mode: bicubic;}