使用标准 VS 2010 模板的 chrome 中奇怪的额外填充
Posted
技术标签:
【中文标题】使用标准 VS 2010 模板的 chrome 中奇怪的额外填充【英文标题】：Strange extra padding in chrome using standard VS 2010 template 【发布时间】：2011-06-14 04:38:42 【问题描述】：我从 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&t=634220066968172593" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=vohUtv47l55JX-_SEfdvXX1rc3wSNSZ9IvoYKmaPF-0UDpWX_2VTYUNkLm7PO0jeF56__8cFVok93Md1-jOV27X9JbBIl3KWaifSkCmwKvk3Dgj6N7xFweVjQK5drnmfItGQ0AEWh8sbhd1vBIHoeA2&t=6df0ad7a" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=r99416_-lUTvcLqe0vx1emg4MR_VAgLHwDco9wPW98QgH03QnH7DRQkA0mx2FQZ5VppBb7JYwOM3gTOTGs8r_j6W0xaQKJo8xTEbbaYeAM9WE90s6Tp-uohjL07JySbKxyIzs5kMm3DtV3kkrbMsJmAIQGWT7gReSVSkk-vQtlSm8AGzdfW36I9zdQwR-z_60&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&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 src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" 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 src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" 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&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/ 虽然格式是 a 但在那里搞砸了 - 问题仍然存在。在 IE 和 Chrome 中运行它，你会在菜单上方看到额外的填充
【问题讨论】：
生成的 HTML 会比这个 ASP 更有用。 你应该在 jsfiddle 上创建一个问题的演示。您问题的当前配置要求我们这样做，我认为我们没有那么积极。 【参考方案1】：这是“跳过链接”中的图像，不知道为什么需要它。在你的 CSS 中试试这个：
img[alt='Skip Navigation Links']
display: none;
【讨论】：
我怕不开心，没区别 我的错，我把 href 误认为是两个菜单上的 id ......虽然我很惊讶你不知道我在做什么。也许访问w3schools.com 可能会有所帮助。 尽管如此，我已经用一些可行的 CSS 更新了答案。【参考方案2】：在菜单中设置 SkipLinkText=""。
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
填充将消失。
Safari 和 Chrome 都有这个问题。它是菜单控件中的辅助功能。 如果您对更多信息感兴趣： http://sim4all.com/blogging/?p=47
【讨论】：
感谢您提供为什么会发生这种情况的背景，尽管我将使用 matty f 的 css 解决方案而不是完全关闭跳过链接【参考方案3】：只是对此的跟进。不建议使用上述方法解决此问题。该图像存在是有充分理由的。这是一项辅助功能，允许使用屏幕阅读器的人跳过导航菜单并直接移至内容。
请看这里的解释：http://webaim.org/techniques/skipnav/
使用显示：无；隐藏屏幕阅读器和视觉用户的链接，使其无用。更改链接文本将意味着正在寻找它的人将无法找到它。
推荐的方法是让图像保持可见，但将其移出屏幕。这样它就看不到了，但屏幕阅读器仍然会找到它。添加以下 CSS 以实现此目的：
img[alt='Skip Navigation Links']
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
这将解决问题，而不会影响可访问性。
【讨论】：
以上是关于使用标准 VS 2010 模板的 chrome 中奇怪的额外填充的主要内容，如果未能解决你的问题，请参考以下文章
在 VS (2010) 中使用标准“主”条目构建和运行 C++ 控制台应用程序