Question

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

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

我很感激任何帮助。提前谢谢。

All browsers

Safari

这是我的母版页：

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

Answer 1

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

看看这个问题：

Safari 5.1 breaks CSS table cell spacing

或尝试使用border-box：

CSS does the width include the padding?

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

Answer 2

尝试重置浏览器的边距和填充。

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

应该强制safari从你的设置值开始，而不是建立默认值。

Safari增加了巨大的空间

2 个答案: