Strana imbottitura extra in cromo con modello VS 2010 standard

Question

Ho il seguente codice leggermente modificato dal modello css di Visual Studio 2010. Il mio problema è che sto ottenendo un extra riempimento/margine di circa 10px nelle div parentie dei controlli del menu solo in chrome. Va bene in IE. Cosa sta succedendo qui?

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 uscita

<%@ 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 come richiesto ...

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

Ora in jsfiddle http://jsfiddle.net/hhdTe/1/ anche se il formato è una, ma avvitato in là - la il problema esiste ancora. Esegui in IE & Chrome e vedrai il riempimento extra sopra i menu

Answer 1

Solo un seguito su questo. non è consigliabile utilizzare i metodi sopra riportati per risolvere questo problema. C'è una buona ragione perché quell'immagine sia lì. È una funzionalità di accessibilità per consentire alle persone con screen reader di saltare i menu di navigazione e passare direttamente al contenuto.

Vedi spiegazione qui: http://webaim.org/techniques/skipnav/

Utilizzando display: none; nasconde il collegamento dai lettori di schermo e dagli utenti visivi, rendendolo inutile. Cambiare il testo del link significa che le persone che lo stanno cercando non saranno in grado di trovarlo.

L'approccio consigliato è di lasciare l'immagine visibile, ma spostarla dallo schermo. In questo modo non può essere visto, ma lo screen reader lo troverà comunque. Aggiungi il seguente CSS per ottenere ciò:

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

Ciò risolverà il problema, senza compromettere l'accessibilità.

Answer 2

È l'immagine all'interno dei "salta collegamenti", non è sicuro del motivo per cui ne hai bisogno. Prova questo nel tuo CSS:

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

Answer 3

Imposta SkipLinkText = "" nel menu.

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

L'imbottitura svanirà.

Sia Safari che Chrome hanno un problema con questo. È la funzione di accessibilità nel controllo menu. Se siete interessati ad ulteriori informazioni: http://sim4all.com/blogging/?p=47