2
새 전자 메일의 골격을 가지고 노는 것만으로 설계되었으며 IE9에서 제대로 크기가 조정되지 않는 것 같습니다. 내가 알아 차 렸던 주요한 점은 톱 테이블이 움직이지 않는다는 것이고 (왼쪽에서 오른쪽으로) 병 테이블이 크기 조정/적절하게 반응하지 않는다는 것입니다. IE9에서 제대로 작동하지 않는 HTML CSS
이
은 jsfiddle입니다 : 내가 실제로 다른 응용 프로그램에서 데이터를 기반으로 이메일을 만들 썬더라는 응용 프로그램을 사용하고 http://jsfiddle.net/hirenshah/k7wg3yry/4/, 그래서 이것은 그에서 생산 된 HTML 파일입니다. 하단 테이블에 대한 끔찍한 국경 스타일을하시기 바랍니다 무시 :.이 모든 크롬과 파이어 폭스에서 작동
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Responsive</title><style type="text/css">/* Mobile Devices */
@media only screen and (max-width: 599px) {
.table {
display:block;
width:100%;
}
.container {
width:300px;
!important max-width:300px;
!important
}
img.resize {
max-width:300px;
height:auto;
}
}
/* All Other Devices */
.container {
background-color: white;
margin-left: auto;
margin-right: auto;
max-width:600px;
padding:10px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
.right {
text-align: right;
}</style></head><body bgcolor="#C0C0C0"><table class="container"><tr><td><table width="100%" dir="rtl"><tr><td class="table" dir="ltr" width="35%"><p>Hello</p></td><td class="table" dir="ltr" width="65%"><p><b>Reference </b><span class="HeaderInline"><b>ABC123</b></span></p></td></tr></table><table><tr><td><p><customlink><img src="http://effervescence.me/wp-content/uploads/2014/01/UnencumberedSharingCircleBanner600px.jpg" class="resize" /></customlink></p><p class="QuoteLetterHeader">Fee is £123.45</p><p class="LetterLargeText_Fixed">Dear Mr Bob</p><p class="LetterLargeText_Fixed">Thanks for visiting our website to get a quote - you'll find your quote below.</p><p class="LetterLargeText_Fixed">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </p></td></tr></table><table width="100%"><tr><td class="table" width="50%"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;border-top-color:black;border-top-style:solid;border-top-width:1pt;"><p class="CallNumber">aa1 a1 a1 a1 a1 a1 a1 a1 1 a1 a1 a1 a1 a1 a1 a1 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">a2 a2 a2 a2 a2 a2 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">a3 a3 a3</p></td></tr></tbody></table></td><td class="table" width="50%"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;border-top-color:black;border-top-style:solid;border-top-width:1pt;"><p class="CallNumber">b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">b2 b2 b2 b2 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">b3 b3 </p></td></tr></tbody></table></td></tr></table></td></tr></table></body></html>
을가 IE에서 code.Tested에
추가하십시오 <메타 이름 = 내용 = "너비 = 장치 폭은 초기 규모는 = 1", "뷰포트"> 헤드 태그 – anujsoft
@anujsoft는 차이 :( – hshah
을하지 않는 것 당신은 sceenshot을 게시 할 수 있습니까 – anujsoft