0

我在几个网站上工作，并且在水平菜单间距方面遇到了重大问题。一个网站是 daniellesshoes.com（这是一个 BigCommerce 网站）另一个是 blog.daniellesshoes.com（这是 WordPress）

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

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

所以要么 1. 我想驾驭所有风格（BigCommerce 出于某种原因带有 7 个以上的样式表，所有样式表都相互覆盖等）并重新设计我自己的 - 正确的方法！或 2. 弄清楚我必须添加什么以使其在每个浏览器上看起来都一样。最后，一旦我完成了，我希望它们自动空间..

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

4

2 回答 2

2

基于列表的菜单规则：

  1. 使用 CSS 重置
  2. 不要设置LI标签的样式（除了位置：、显示：和浮动：）
  3. 使用-tagsdisplay:block并为其设置样式A
  4. 如果您正在使用它们，请清除您的浮动

看我的教程：I Love Lists

于 2012-05-25T20:59:09.833 回答
0

The only way to space items automatically in CSS is by using display: table; and table-cell and table-layout: fixed;. It works in every modern browser and IE8, as it's CSS2.1 recently supported everywhere.

Check first example of this jsFiddle: http://jsfiddle.net/aznxD/
Resetting CSS for lists is done by indicating:

ul {
    margin: 0;
    padding: 0;
}

No need for changing list-style if you already change the value of display for li. The 40 other lines of various reset CSS are for other things than lists, that's OT here.

The second example in previous fiddle is for IE6/7, by using sort of display: inline-block (see comment in CSS and in the JS left-bottom part of screen) and calculated padding that will depend of the number of items in menu and length of text. That's why items won't space automatically... You can add these specific rules via conditional comments in a specific stylesheet or around html element with class(es).

This is not pixel perfect... but it isn't that important: nobody except you will see your site in numerous browsers and their different versions.
Maybe some people will see your site on two browsers, one at work and another one at home. Will they notice that my example is 957px wide and not 960px anymore? Will they care or will they be glad that it's less horrible than most sites designed for "modern browsers" with no care and tests at all for old browsers? (designing for modern browsers isn't a problem, not caring at all for older ones with no fallback is a problem)
IMHO your time will be better used at providing media queries in support of Responsive Web Design and maybe Mobile First in a second or third time and removing every unused CSS rule in your CMS if it's bloated: better maintenance in the future and better performance now and in the future.

于 2012-05-25T23:00:53.380 回答