我正在开发一些网站，并且在水平菜单间距方面存在重大问题。一个网站是daniellesshoes.com（这是一个BigCommerce网站）另一个是blog.daniellesshoes.com（这是WordPress）
我的问题是这个。我们为客户制作这些网站。我们希望菜单是紫色的，并且li在悬停时突出显示粉红色。两个问题。 1.如果客户端从BigCommerce CSS添加一个菜单项，它会搞乱间距..
第二个问题是IE6,7,8和9都显示了间距的像素差异和一些禁用溢出隐藏等等等
所以要么1.我想要获得所有风格（BigCommerce由于某种原因带有7个以上的样式表全部覆盖彼此等）并重新设计我自己 - 正确的方式！或2.找出我必须添加的内容，使其在每个浏览器上看起来都一样。最后，一旦我完成了这项工作，我希望他们能够自动安排......
请查看上述网站并检查元素，然后让我知道我应该做些什么。谢谢！
答案 0 :(得分：2)
基于列表的菜单规则：
LI标签的样式（除了position：，display：和float：）display:block并设置A - 代码请参阅我的教程：I Love Lists
答案 1 :(得分：0)
在CSS中自动分隔项目的唯一方法是使用display: table;和table-cell以及table-layout: fixed;。它适用于所有现代浏览器和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吗？他们是否会关心或者他们会不会觉得它比大多数为“现代浏览器”而设计的网站都不那么可怕，而对旧浏览器一点都不关心和测试？ （为现代浏览器设计不是问题，对于没有后备的老版本来说，根本不关心是问题）
恕我直言，你的时间将更好地用于提供媒体查询以支持响应式网页设计，也许可以在第二次或第三次使用Mobile First，并删除CMS中每个未使用的CSS规则，如果它臃肿：未来更好的维护和更好的性能现在和在将来。