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

【问题标题】：Page rendering differently in Safari - all other browsers OKSafari 中的页面呈现方式不同 - 所有其他浏览器都可以
【发布时间】：2016-05-03 19:08:38
【问题描述】：

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

在我的带有 Chrome 和 IE 的 PC 上看起来不错，但在他的 Mac 和 iPhone（都使用 Safari）上，布局没有按照我们想要的方式显示。

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

请问有人知道这个 Safari 定位行为的修复方法吗？

附：上传模板时会自动添加过期的表格标签。

<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>

【问题讨论】：

您提供的 HTML 在 Safari 8 中按预期工作... codepen.io/anon/pen/rOZvEE?editors=100 -- 请提供一个 fiddle、plunkr 或 codepen 来显示您的问题。为了热爱一切，请在发布之前格式化您的代码。

标签： html css safari

【解决方案1】：

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

【讨论】：