3

我有一个关于向导航中具有下拉菜单的按钮添加某种类型的图标或指示器的问题。该菜单在所有浏览器中看起来都不错，只有少数例外。菜单本身内置在 Ektron CMS 中。我的导航中有 7 个按钮，其中 5 个有下拉菜单。正如您在我的网站上看到的那样，我有一个小右箭头，指示哪些有下拉菜单。箭头是一个 unicode 字符，幸运的是在 CMS 的菜单控件中添加它时可以使用。我对结果相当满意，但我不确定这是否是创建图标的最佳方式。

是否有更好或更有效的方法来创建此类指标？只有在存在子菜单的情况下，JavaScript 才有办法分配符号或图标吗？

尽管我的解决方案有效，但有一个问题我无法解决。在 IE7+、Chrome 和 Safari 中，所有按钮都完美对齐。在 FireFox 中，没有下拉菜单的 2 个按钮比有下拉菜单的按钮高 4px。一旦我添加了 unicode 箭头字符，就会发生这种情况。我添加了一个小的 CSS hack 来纠正 FF 中的问题，但现在我在 Chrome 中遇到了一个问题，最后两个按钮比其他按钮低 4px。我不确定如何有效地纠正这个问题。

这是我网站的链接。感谢您提供的任何帮助。

http://www.clinicaltrialsummit.com/

4

2 回答 2

0

感谢您的回复，但我应该提到您上面引用的样式是我的 css hack。我将尝试解释我使用它的原因。

我需要一种方法来挑选出我的最后一个导航按钮，而不能将类直接应用于 li。由于菜单本身是使用我的 CMS 中的控件创建的，因此 HTML 标记是动态生成的。我不想使用 :last-child 伪类，但我还需要一种将额外的填充像素添加到 FF 的方法。我知道 IE 会忽略 :last-child。但是，这就是我失败的地方，因为它也在 Chrome 中添加了它，我相信 Safari。我可以把整个风格拿出来，这可能会帮助你更好地看到我的问题。您会看到除了 FF 之外的所有浏览器中的垂直对齐方式都是正确的。

在我添加了我的 UTF-8 字符之前，整个对齐是完美的。那是它变得错位的时候，但仅在FF中。

如何添加 CSS 箭头？

于 2012-11-29T16:20:45.433 回答
0

尝试删除此样式：

#nav li a:last-child[href="http://www.healthtech.com/press.aspx"] { 
    padding: 16px 0.4em 0 
}

您有 14px 的默认填充顶部，但上面的规则为具有特定 href 的最后一个子元素设置了 16px 的填充。

在您的 jsfiddle 示例中，没有此 css 规则。

您可以使用 css 箭头代替 UTF-8 符号或使用图标，但我认为像您一样使用 UTF-8 符号是可以的。

于 2012-11-29T15:38:58.910 回答