在asp.net中使用主页面进行新的站点设计。页面的标题是一个35像素高的“菜单栏”,其中包含一个作为无序列表呈现的asp菜单控件。
所选择的菜单项目以不同的彩色背景和左上方和右侧的2px边框设计。所选菜单项的底部应与菜单栏的底部对齐,因此所选的“选项卡”看起来像流入下面的内容。在Firefox和IE中看起来不错,但在chrome中,“标签”似乎比菜单栏的底部高出1个像素。
只是想知道是否有某种错误,我不知道。
我意识到,你很可能需要代码来帮助这个问题,所以不快地发布css。
编辑:
这里是菜单的css …
div.hideSkiplink { width:40%; float:right; height:35px; } div.menu { padding: 0px 0px 0px 0px; display:inline; } div.menu ul { list-style: none; } div.menu ul li { margin:0px 4px 0px 0px; } div.menu ul li a,div.menu ul li a:visited { color: #ffffff; display: block; margin-top:0px; line-height: 17px; padding: 1px 20px; text-decoration: none; white-space: nowrap; } div.menu ul li a:hover { color: #ffffff; text-decoration: none; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: none; border-left: 1px solid #fff; } div.menu ul li a:active { background:#ffffff !important; border-top:2px solid #a10000; border-right:2px solid #a10000; border-bottom: none; border-left:2px solid #a10000; color: #000000 !important; font-weight:bold; } div.menu ul a.selected { color: #000000 !important; font-weight:bold; } div.menu ul li.selected { background:#ffffff !important; border-top:2px solid #a10000; border-right:2px solid #a10000; border-bottom: none; border-left:2px solid #a10000; } div.menu ul li.selected a:hover { border: none; }
所选的类被添加到li和一个元素通过jquery …
这是一个问题的截图
chrome示例在顶部,u可以在选项卡下方看到1px的红色边框。
底部是一切看起来都很好的firefox图像。
编辑:
解决方法
重要的是要意识到,网页总是在不同的浏览器中呈现不同的方式。 Acheiving像素完美是徒劳的,现在我尝试向我的客户解释什么样的成本涉及,使每个浏览器呈现的网站完全相同。更经常的是,他们明白IE6和FF4不会以相同的方式呈现任何页面。我们必须努力使我们的客户了解并拥抱网络的动态。
逐渐增强和优雅退化。和平。