Safari 增加了巨大的空白空间答案

【问题标题】：Safari adds huge empty spaceSafari 增加了巨大的空白空间
【发布时间】：2013-02-04 11:24:05
【问题描述】：

我在使用 Safari 时遇到了一些问题。

虽然所有浏览器都可以正常显示页面，但 Safari 会在主 ContentPlaceholder 上方添加一个巨大的白色区域，如下图所示。这发生在每个页面上，所以我猜问题出在母版页上，但我不知道如何解决它。
菜单上方的一些额外填充也存在一个小问题（Chrome 中也是如此）

如果有任何帮助，我将不胜感激。提前致谢。

这是我的母版页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
    <div class="header">
        <div class="title">
            <h1>
                My ASP.NET Application
            </h1>
        </div>
        <div class="loginDisplay">
            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                <AnonymousTemplate>
                    ................
                </AnonymousTemplate>

                <LoggedInTemplate>
                    ................
                </LoggedInTemplate>
            </asp:LoginView>
        </div>
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    ................
                </Items>
            </asp:Menu>
        </div>
    </div>
    <div class="leftMenu">
        <asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>

    <div class="clear">
    </div>
</div>
<div class="footer">

</div>
</form>

这里是源代码和 CSS：http://jsfiddle.net/V5aCa/6/

【问题讨论】：

标签： asp.net html css

【解决方案1】：

这是因为您使用的是display:table safari 对待它的方式与其他浏览器不同

看看这个问题：

Safari 5.1 breaks CSS table cell spacing

或尝试使用border-box:

CSS does the width include the padding?

由于跳过导航锚点，您的导航上方的空间出现，如果您绝对定位或浮动它，您的空间应该消失

【讨论】：

谢谢！ display:block 修复了它。
jsfiddle.net/V5aCa/7 position absolute 已经摆脱了差距？我在链接中添加了一个 Test id
使用这个 CSS 代码修复它：img[alt='Skip Navigation Links'] { position:absolute;左：-10000px；顶部：自动；宽度：1px；高度：1px；溢出：隐藏；}

【解决方案2】：

尝试重置浏览器的 Margin 和 Padding。

body {
      margin: 0px;
     padding: 0px;
}

这应该强制 safari 从您设置的值开始，而不是建立在其默认值上。

【讨论】：

这已经在 CSS 中了。而且实际上是两次！首先是重置，然后是默认值。