0

我有一个必须在所有浏览器上运行的网站。我正在设计一个如下图所示的菜单

在此处输入图像描述

我使用以下 html 和 css 代码制作了这个菜单

html

 <ul class="menu">
 <li><a href="#"><img src="images/ico1.png" alt="home"><span>Home</span></a></li>
 li><a href="#"><img src="images/ico2.png" alt="products"><span>Products</span></a></li>
 <li><a href="#"><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></a></li>
 <li><a href="#"><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></a></li>
 <li><a href="#"><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></a></li>
 </ul>

CSS

.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}

它在 chrome、Ie9、firefox 等中完美运行。但是当我签入 Ie8 时，菜单会像下图一样折叠在此处输入图像描述

我该如何纠正这个错误？

4

1 回答 1

0

目前没有 ie8 可供我使用，但在查看@您的标记/样式后，我的想法如下：
1. 错位很可能是边距填充问题……看起来spans 上没有足够的空间与图标相同的行，并且此中断正在放大它，因为一旦将spans 推离该行，它们就已margin-top声明，这只是将它们推得更远。

在这里你有几个选择：首先，在 IE8 中使用条件注释来定位菜单；照亮所涉及的元素（我喜欢使用对比鲜明的背景/边框/等，让每个元素从组中脱颖而出）并在 F12 中检查它们......如果答案不是很明显，开始将物理像素大小与另一个浏览器进行比较。因此，如果您在这种情况下使用 Chrome……如果开发者工具打开，您可以通过将鼠标悬停在某个元素的尺寸上……Chrome 的尺寸与 IE8 的尺寸相比如何？如果它们的大小不完全不同，请对相同的元素重复此过程，仅检查定位、布局、填充和边距。（@至少）其中一个不应该与另一个浏览器匹配。您将要补偿用户代理渲染差异，这可以使用我们已经用于定位菜单的条件注释来实现。所以让我们假装所有li元素的宽度大约为 130 像素...如果您注意到它们在 IE 中只有 115 像素，请通过 cc 将 15 个像素的宽度应用到 IE8 和仅 IE8。

我在胡说八道，因为我很烂，但我会试着把它包起来……你的标记示例在第二个中缺少一个左括号li，prolly 想在你做任何其他事情之前先解决这个问题。

放弃 s 上的填充li。此外，适用display:inline于它们并制作您的锚点display:block; float:left......这是摆脱和/或测试边距/填充问题的超级简单方法。

我还将图标放入aas background-images 中...这是我的特殊之处，但这实际上也是您问题的解决方案...如果标记中没有更多元素，则spans 不能与 s 冲突。imgimg

另一个可能的简单解决方案：spans 向左浮动并应用左边距...只需使用 float:right可能是一个解决方案；将它们浮动并放弃margin-left将是我的第二次尝试，如果根本float:right没有解决它。

于 2013-06-03T17:00:03.480 回答