您将注意到:hover CSS用于网站测试的主要导航区域(徽标下的灰色栏)中的链接.ksischool.com在Firefox中工作正常,但IE7会删除底部的几个填充像素.为什么？
我假设你在谈论顶级导航; 你填充内联元素(标记).在内联元素上放置填充时,水平填充将推动其他元素,但垂直填充只会增加元素的大小而不影响其周围的布局.Firefox可能会在源代码下方的元素上方渲染框,但无论出于什么原因,IE都会将它们渲染到下方,这就是为什么你会看到盒子的某些部分消失的原因.
要解决此问题,请将所有链接浮动(这实际上将它们转换为块元素).您需要在其他位置调整标记以使其正常工作(如果您只是直接浮动,可能会出现一些清除问题),但这应该可以解决特定的IE问题.
编辑更多细节:
如上所述,内联元素上的垂直填充不会以您期望的方式运行(它会增加元素的高度,但由于填充不与其他页面元素交互,因此内联元素通常以奇怪的方式重叠事物).所以要解决这个问题,你需要以某种方式使填充元素(标签)具有display: block.为了让所有东西保持在同一条线上,向左浮动是最好的选择.这是我将使用的标记和样式:
有些事情需要注意:我正在使用标准的clearfix(Google,如果您不知道我在说什么),以确保UL清除其浮动的内容.如果用户调整其字体大小,这将允许父导航元素适当增大.
此外,我删除了间隔,·并建议.last在CSS中使用背景图像和类.这纯粹是个人偏好.(在一个理想的世界中,你会使用:after伪类来注入·,但是由于IE 6不支持它,你不能这样做并且支持所有浏览器.)我推荐背景图像的理由而不仅仅是留在标记中的是它会导致更清晰的标记,并且更容易在路上改变(如果您的客户决定他们想要管道而不是点,请说).
这个标记/样式背后的逻辑是你需要填充边框/背景颜色才能工作,这意味着它必须具备display: block.但是,添加它会将每个链接粘贴在不同的行上,因此您需要浮动它或其父级.由于它是列表的一部分,因此更容易浮动li父级并使用clearfix来确保ul页面上仍然存在某些内容.
显然,如果您使用此代码,则需要删除#nav_banner element样式表中较低层的大部分内容,并且您可能需要再次调试跨浏览器.即使你不这样做,希望它能为你提供一些在未来轻松构建顶级导航的想法.
京公网安备 11010802040832号 | 京ICP备19059560号-6 
