Question

我从Visual Studio 2010 css模板稍微修改了以下代码。我的问题是我在chrome中的菜单控件的父div中获得了大约10px的额外顶部填充/边距。它在IE中很好用。怎么回事？

CSS

    /* CSS RESET 
----------------------------------------------------------*/
*{margin:0;padding:0;}


/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    /*font-variant: small-caps;*/
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    min-height: 420px;
}

.mainContent
{
    float:left;    
    width:790px; 
    padding-left:8px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{

}

div.topMenuContainer
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 0px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    margin:0px;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
    margin:0px;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
    margin:0px;
}

/* LEFT MENU   
----------------------------------------------------------*/

div.leftMenuContainer
{
    background-color:#3a4f63;
    width:160px;
    float:left;
    min-height: 420px;
}

div.leftMenu
{
    padding: 4px 0px 4px 8px;
}

div.leftMenu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.leftMenu ul li a, div.leftMenu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.leftMenu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.leftMenu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

ASPX

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MTGames.SiteMaster" %>

<!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 Site
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear topMenuContainer hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
                        <asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
                        <asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
                        <asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>

        <div class="main">
            <div class="clear leftMenuContainer hideSkiplink">
                <asp:Menu ID="LeftNavMenu" runat="server" CssClass="leftMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
                        <asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
                        <asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
                        <asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
                    </Items>
                </asp:Menu>
            </div>
            <div class="mainContent">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

按要求输出HTML ...

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

    MT Games LTD - Home

</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form method="post" action="default.aspx" id="ctl01">

<div class="aspNetHidden">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkLDnBf84MIbFVqD400rg+QLHpOjYA01q5saPk2YvtQR8=" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['ctl01'];

if (!theForm) {

    theForm = document.ctl01;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>





<script src="/WebResource.axd?d=e5ggu92Xslxua3kL9nz8UEofZFOqESloGE_Cj0acdYupGWiZv6mA-7j9gl1qZyu-Y2_dOyT682uBRYryo2Uk1qSiI78I-2pgTagWwnubNEw1&amp;t=634220066968172593" type="text/javascript"></script>





<script src="/ScriptResource.axd?d=vohUtv47l55JX-_SEfdvXX1rc3wSNSZ9IvoYKmaPF-0UDpWX_2VTYUNkLm7PO0jeF56__8cFVok93Md1-jOV27X9JbBIl3KWaifSkCmwKvk3Dgj6N7xFweVjQK5drnmfItGQ0AEWh8sbhd1vBIHoeA2&amp;t=6df0ad7a" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=r99416_-lUTvcLqe0vx1emg4MR_VAgLHwDco9wPW98QgH03QnH7DRQkA0mx2FQZ5VppBb7JYwOM3gTOTGs8r_j6W0xaQKJo8xTEbbaYeAM9WE90s6Tp-uohjL07JySbKxyIzs5kMm3DtV3kkrbMsJmAIQGWT7gReSVSkk-vQtlSm8AGzdfW36I9zdQwR-z_60&amp;t=2610f696" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

//]]>

</script>



<script src="/ScriptResource.axd?d=otDNNytXiqv-illCGIud3TULs9-clnOJc4rCdck1L_NgOC9rQIuScBEulatBNXXmu3mRYEY-IBlraYglBRImGj3VFqJMq5q1D8augYHxad15XoOHRiy4KA8ZCRoOmHQsaZmo-EGDbQ833sK4G1QpyLm1dIkybv0r0OSMKV_PkG29XB8AWUm5gsLlNrC2G67K0&amp;t=2610f696" type="text/javascript"></script>

    <script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ctl00$ScrptManager', 'ctl01', [], [], [], 90, 'ctl00');

//]]>

</script>



    <div class="page">

        <div class="header">

            <div class="title">

                <h1>

                    MT Games LTD

                </h1>

            </div>

            <div class="loginDisplay">



                        [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]



            </div>

            <div class="clear topMenuContainer hideSkiplink">

                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&amp;t=634220066968172593" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">

    <ul class="level1">

        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Content/SavingsClub.aspx">Savings Club</a></li><li><a class="level1" href="Content/BuySellExchange.aspx">Buy Sell Exchange</a></li><li><a class="level1" href="Content/Photos.aspx">Photos</a></li><li><a class="level1" href="Content/ContactUs.aspx">Contact Us</a></li>

    </ul>

</div><a id="NavigationMenu_SkipLink"></a>

            </div>

        </div>



        <div class="main">

            <div class="clear leftMenuContainer hideSkiplink">

                <a href="#LeftNavMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&amp;t=634220066968172593" width="0" height="0" style="border-width:0px;" /></a><div class="leftMenu" id="LeftNavMenu">

    <ul class="level1">

        <li><a class="level1" href="Content/Consoles.aspx">Consoles, Games & Accessories</a></li><li><a class="level1" href="Content/DVDBRMusic.aspx">DVD, BLUERAY & Music</a></li><li><a class="level1" href="Content/Collectables.aspx">Collectables & Figurines</a></li><li><a class="level1" href="Content/Guns.aspx">Guns</a></li><li><a class="level1" href="Content/Knives.aspx">Knives</a></li><li><a class="level1" href="Content/Archery.aspx">Archery</a></li><li><a class="level1" href="Content/Other.aspx">Other Products</a></li>

    </ul>

</div><a id="LeftNavMenu_SkipLink"></a>

            </div>

            <div class="mainContent">



    <p>

        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.

    </p>

    <p>

        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"

            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.

    </p>



            </div>

        </div>

        <div class="clear">

        </div>

    </div>

    <div class="footer">



    </div>



<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script><script type='text/javascript'>new Sys.WebForms.Menu({ element: 'LeftNavMenu', disappearAfter: 500, orientation: 'vertical', tabIndex: 0, disabled: false });</script></form>

</body>

</html>

现在在jsfiddle http://jsfiddle.net/hhdTe/1/虽然格式是一个但搞砸了 - 问题仍然存在。在IE＆amp;中运行它Chrome，你会在菜单上方看到额外的填充

Answer 1

在菜单中设置SkipLinkText =“”。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

填充物会消失。

Safari和Chrome都存在问题。它是菜单控件中的辅助功能。如果您对更多信息感兴趣： http://sim4all.com/blogging/?p=47

Answer 2

只是对此进行跟进。建议不要使用上述方法来解决此问题。这个形象存在的原因非常充分。它是一种辅助功能，允许屏幕阅读器的人跳过导航菜单并直接移动到内容。

请参阅此处的说明：http://webaim.org/techniques/skipnav/

使用display：none;隐藏屏幕阅读器和视觉用户的链接，使其无用。更改链接文本意味着正在寻找它的人将无法找到它。

建议的方法是将图像保持可见，然后将其从屏幕上移开。这种方式无法看到，但屏幕阅读器仍然会找到它。添加以下CSS以实现此目的：

img[alt='Skip Navigation Links'] {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

这将解决问题，而不会影响可访问性。

Answer 3

这是“跳过链接”中的图像，不确定为什么需要它。在你的CSS中试试这个：

img[alt='Skip Navigation Links'] {
    display: none;
}

使用标准VS 2010模板在chrome中添加奇怪的额外填充

3 个答案: