Safari中的页面呈现方式不同 - 所有其他浏览器都可以

Question

我正在尝试为我的朋友制作HTML / CSS eBay商店模板。

在我的电脑上使用Chrome和IE看起来不错，但在他的Mac和iPhone上（都使用Safari），布局并没有按照我们的意愿显示。

在左栏中，菜单项应显示在列的顶部，但在Safari上，它们显示在列的底部。

请问有没有人知道这个Safari定位行为的修复程序？

P.S。上传模板时会自动添加过时的表格标签。

<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr><td colspan="3" rowspan="1" height="15"><img width="1" height="15" src="http://pics.ebaystatic.com/aw/pics/s.gif"></td></tr>
<tr><td align="left" colspan="1" rowspan="1" valign="top" id="LeftPanel" width="210" height="100%" style="word-wrap:break-word;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4thldr"><tbody><tr>

<td><div><div style="padding:0px 0px 0px 0px;width:100%;float:left;font-size:14pt;color:#FFFFFF">
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none">Title 1</h5></div>
<div style="clear:both;width:100%">
Menu 1 Items
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none;margin-top:20px">Title 2</h5></div>
Menu 2 Items
</div>
</div></div></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4thldr"><tbody><tr><td>

<div><div style="padding:0px 0px 0px 0px;width:100%;float:left;font-size:14pt;margin-top:20px">
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none">Newsletter Signup Title</h5></div>
<div style="clear:both;width:100%">
Newsletter Signup Box Content

<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none;margin-top:20px">Payment Methods Title</h5></div>

Payment Methods Content


</div>
</div></div>

</td></tr></tbody></table></td>

<td colspan="1" rowspan="1" width="13"><img width="13" height="1" src="http://pics.ebaystatic.com/aw/pics/spacer.gif"></td><td colspan="1" rowspan="1" valign="top">
                                                    <table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td colspan="1" rowspan="1">
                                                                    <table id="TopPromoArea" cellspacing="0" cellpadding="0" border="0" width="100%"></table>
                                                                </td></tr><tr><td align="left" colspan="1" rowspan="1" valign="top" id="CentralArea">
<div style="width:100%;background-color:#FFFFFF;padding:20px 20px 20px 20px;float:left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4stw">
// Long list of items here
</table> 
</div></td></tr></tbody></table>
<br clear="none">
</td>
</tr></tbody></table>

Answer 1

我发现问题是由于reset.css声明“vertical-align：bottom”，这似乎只影响了Safari。我现在已经删除了这一行，现在工作正常。