<meta name="viewport" content="width=device-width" />
<style>
body {
background-color: #e4e4e4;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.ExternalClass * {
line-height: 100%;
}
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}
.checkout-price {
position: absolute;
top: 590px;
margin-left: 25px;
width: 120px;
height: 120px;
font: 28px/120px Helvetica, Arial, sans-serif;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(black, .3);
text-indent: -1px;
letter-spacing: -1px;
background: #e54930;
border: 1px solid;
border-color: #b33323 #ab3123 #982b1f;
border-radius: 60px;
@include user-select(none);
@include linear-gradient(top, #f75a3b, #d63b29);
@include box-shadow(inset 0 1px 1px rgba(white, .3), 0 1px 2px rgba(black, .2));
}
.checkout-price:before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px solid #f5f8fb;
border-radius: 60px;
@include box-shadow(inset 0 1px 1px rgba(white, .2), inset 0 -1px 1px rgba(black, .25), 0 -1px 1px rgba(black, .25));
}
.cheapest {
margin-left: 80px;
font-size: 14px;
padding-top: 22px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 30px;
font-weight: bold;
}
@media only screen and (max-width: 480px) {
div, p, a, li, td {
-webkit-text-size-adjust: none !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
@media only screen and (max-width: 767px) {
div, p, a, li, td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
}
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div style="background-color: #e4e4e4">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="cell">
<table>
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser<a href="http://worldtravelhub.com.au/newsletter/201401/201401.html" target="_blank" style="text-decoration: underline; color: blue;"> Click Here</a></span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td>
<img src="http://worldtravelhub.com.au/newsletter/201401/images/high_quality_logo_wth.png" width="500" height="108" border="0" style="display: block"></td>
</tr>
</table>
<table border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest">
<span class="bold">We'll get you the CHEAPEST flights to the</span><br />
<span class="indsub">Indian Subcontinent</span>
</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<span class="checkout-price">
<span style="font-size: 10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
<a href="tel:1800 984 045" style="color: #e62529; font-size: 20px; font-weight: bold; text-decoration: none;">Toll Free: 1800 984 045</a><br />
<a href="mailto:[email protected]" style="font-size: 11px; letter-spacing: 2px; text-decoration: none; color: #000;">[email protected]</a><br />
<a href="http://www.worldtravelhub.com.au/" style="font-size: 11px; letter-spacing: 1px; text-decoration: none; color: #000;">www.worldtravelhub.com.au</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<p style="text-align: center;">
<span style="font-size: 22px; color: #e62529; letter-spacing: 3px; font-weight: bold;">Book online <span style="color: #000;">24/7 </span>at worldtravelhub.com.au</span><br>
<span style="font-size: 8px;">*A Verifiable written quote from another Australian registered travel businesses must be aproved and fare quoted must be generally avaliable to the public in the market and must be for the same date,seat class,fare category and airline and given to us before we make a booking for the customer.The quote must be for booked fares originating in Australia to Indian subcontinent.Lics No<span style="font-weight: bold;"> 2TA6049</span></span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#888888">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</font></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>Phone:</strong> +61 2 8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> [email protected]</font></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser<a href="http://worldtravelhub.com.au/newsletter/201401/201401.html" target="_blank" style="text-decoration: underline; color: blue;"> Click Here</a></span>
<br>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
我的HTML頁面適用於所有版本的Chrome瀏覽器和IE 10的罰款,但似乎並沒有在IE 8和IE 9正常工作不工作,問題是在類.bgimg中填充底部的CSS。頁面的底部部分在右下方,當我添加px而不是%時,它會向上移動並且可以正常工作,但下面的文本即紅色的聯繫人詳細信息不再可見。請幫助 感謝您的幫助先進
您可以查看這個鏈接.. http://worldtravelhub.com.au/newsletter/201401/201401.html
請格式化你的代碼 - 只包括令人不安的部分,並進行了[小提琴](http://jsfiddle.net/ )。 – Vucko
那麼,你的頁面沒有DOCTYPE聲明,還有很多其他的問題(例如,'
'和''在HTML文檔中通常被認爲是有用的......)猜測這可能會觸發任何怪癖模式IE 8和IE 9放入沒有DOCTYPE?使用具有DOCTYPE的HTML文檔嘗試您的CSS,並且看起來甚至像實際的HTML一樣,並且您可能會獲得更多成功。 –對不起,發佈這樣一個愚蠢的問題..新的HTML和CSS ..NELL謝謝你的時間和幫助的馬特吉布森..編輯下面的變化後,它似乎在所有IE版本..工作,謝謝你再次你的幫助。 – user3818870