水平菜单造型

我正在一些网站上工作，并遇到水平菜单间距的主要问题。一个网站是daniellesshoes.com（这是一个BigCommerce网站）另一个是blog.daniellesshoes.com（这是WordPress）水平菜单造型

我的问题是这样的。我们为客户制作这些网站。我们希望菜单是紫色的，并且在悬停时突出显示粉红色。在这两个问题。 1.如果客户端从BigCommerce CSS添加一个菜单项，它会弄乱间距..

第二个问题是，IE6,7,8和9都显示像素差异的间距和一些禁用溢出隐藏等等等等等等等

所以要么1.我想搭乘所有风格（BigCommerce出于某种原因带有7+样式表，所有重写海誓山盟等），并重新设计我自己的 - 正确的方式！或者2.找出我必须添加的内容，以使其在每个浏览器上看起来都一样。最后，一旦我完成了，我想他们自动空间..

请查看上述网站和检查元素，然后让我知道我该怎么做。谢谢！

来源

2012-05-25 user1232986

规则基于列表的菜单：

使用CSS重置
不要样式的LI标签（非排名:,显示：与浮:)
使用display:block和风格在A如果你使用它们

见我tutoria标签都有效

清除你的花车l：I Love Lists

来源

2012-05-25 20:59:09

更完整且最新的重置CSS：http://meyerweb.com/eric/tools/css/reset/ – Knyri

在CSS中自动空间项的唯一方法是使用display: table;和table-cell和。它适用于每个现代浏览器和IE8，因为它最近在任何地方都支持CSS2.1。这个的jsfiddle的

首先检查例如：列出http://jsfiddle.net/aznxD/
重置CSS是用于表示完成：

ul { 
    margin: 0; 
    padding: 0; 
}

无需改变list-style如果你已经改变display的价值li。各种复位CSS的40行其他行不是列表，这是OT。

以前的小提琴中的第二个例子是针对IE6/7，通过使用排序display: inline-block（请参阅CSS中的评论和屏幕的JS左下部分）以及计算的填充将取决于菜单中的项目数和文本的长度。这就是物品不会自动放置的原因...您可以通过conditional comments in a specific stylesheet or around html element with class(es)添加这些特定规则。

这不是像素的完美...但它不是那重要的是：除了你会看到你的网站在许多浏览器和它们的不同版本中没有人。
也许有些人会在两个浏览器上看到您的网站，一个在工作，另一个在家。他们会注意到我的示例是957px宽而不是960px了吗？他们会关心还是会高兴地看到，与大多数为“现代浏览器”设计的网站相比，旧版浏览器根本没有任何关心和测试的可怕性？（为现代浏览器设计不是问题，不关心所有旧的没有回退是是一个问题）
恕我直言，你的时间将更好地用于提供媒体查询支持响应式网页设计，也许移动第一在第二次或第三次，并删除您的CMS中的所有未使用的CSS规则，如果它臃肿：未来更好的维护和现在和将来更好的性能。

来源

2012-05-25 23:00:53 FelipeAls

水平菜单造型

回答

相关问题