Странные дополнительные отступы в Chrome с использованием стандартного шаблона VS 2010 - PullRequest
Новая
       7

Странные дополнительные отступы в Chrome с использованием стандартного шаблона VS 2010

6 голосов
/ 24 января 2011

У меня следующий код, слегка измененный из шаблона CSS Visual Studio 2010. Моя проблема в том, что я получаю дополнительный верхний отступ / отступ примерно в 10 пикселей в родительских элементах управления меню только в Chrome. Это нормально в 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 & Chrome, и вы увидите дополнительные отступы над меню

Ответы [ 3 ]

11 голосов
/ 13 февраля 2011

Установить SkipLinkText = "" в меню. 

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

Обивка исчезнет.

У Safari и Chrome есть проблема с этим. Это функция доступности в элементе управления меню. Если вы заинтересованы в дополнительной информации: http://sim4all.com/blogging/?p=47

6 голосов
/ 21 марта 2012

Просто продолжение этого. Использование вышеуказанных методов для устранения этой проблемы не рекомендуется. Есть очень веская причина для того, чтобы этот образ был там. Это функция специальных возможностей, позволяющая пользователям с программами чтения с экрана пропускать навигационные меню и переходить непосредственно к контенту.

См. Объяснение здесь: http://webaim.org/techniques/skipnav/

Использование дисплея: нет; скрывает ссылку от программ чтения с экрана, а также от визуальных пользователей, делая ее бесполезной. Изменение текста ссылки будет означать, что люди, которые ищут его, не смогут его найти.

Рекомендуется оставить изображение видимым, но убрать его с экрана. Таким образом, его невозможно увидеть, но программы чтения с экрана все равно найдут его. Добавьте ниже CSS, чтобы добиться этого: 

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

Это решит проблему, не влияя на доступность.

2 голосов
/ 24 января 2011

Это изображение внутри «пропустить ссылки», не знаю, зачем вам это нужно.Попробуйте это в своем CSS: 

img[alt='Skip Navigation Links'] {
    display: none;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...