需要通过CSS Pro清理

Question

在我看来，我的顶级导航栏有点乱，但我不知道如何以其他方式做到这一点。每次我重新加载页面时，它都会跳转一毫秒。 （显示列表式项目符号）我甚至可以将list-style：none应用于父对象，如您所见。

另外，请注意按钮未完全居中的方式。这是为什么？有些是，有些则不是。它们都是16x16图像。我试着通过添加一两个类来轻松添加和更改按钮。我希望图像和文本尽可能在按钮参数之间居中。

我希望“#nav_login_welcomeuser”保持在大小明智的位置，但是其他所有内容都要拉伸并填充920px宽的条形码。

漂浮物：左边是不是马虎？我认为这会在页面首次加载时引起跳跃行为。

以下是代码：http://jsfiddle.net/N6SQe/

Answer 1

看到列表项目符号听起来像Flash Of Unstyled Content (FOUC)，但在特定情况下，这通常是特定浏览器中的错误。您需要提供有关您在其中看到的浏览器的更多详细信息，并在实际页面中包含样式表。

（我后来注意到：可见子弹可能是因为你只为list-style提供了一个值，但它是一个短切属性需要两个。使用list-style: none none;。）

你应该做/注意的一些事情：

• 始终为HTML中的图像指定宽度/高度属性。这将阻止布局跳跃。 （顺便说一句，您可以使用http://placehold.it/等服务作为占位符图形。）
• 这是一个菜单，因此请使用链接（a元素而不是span）并将图片放入其中，因为用户希望能够点击图片。他们甚至想要点击整个“矩形”，因此在链接而不是li上添加填充和大小属性 - 特别是因为您将hover效果放在li上，引导用户认为他可以点击“矩形”，即使他不在链接上。 :active上的li没有多大意义。
• 您需要注意固定宽度和高度（以像素为单位）。请记住，用户可以覆盖字体大小（不是每个人都可以读取12个像素大小的文本！）如果文本变大，它将包装和/或切断，这不仅难看，而且还不可读和无法使用。您的设计需要灵活地对不同的字体大小做出反应。
• 不要重复属性。例如，在顶级元素中定义一次字体样式。
• :first/last-child规则是不必要的。它们只重复列表项已有的属性，但可以放在列表本身的边框除外。
• 什么是margin-left: -10px;？

我就是这样做的：http://jsfiddle.net/uSgDt/4/

---

编辑：要让商品展开，唯一的方法是将其显示为表格。见http://jsfiddle.net/uSgDt/6/

但IE6不支持此功能。如果你需要它在IE6中正确显示，你必须实际使用HTML表。