Question

我正在尝试制作水平菜单，垂直和水平对齐。

我实际上正在使用

在Internet Explorer 9中，当我将鼠标悬停在某个项目上时显示的背景在黑色线条上方移动1 px。
在chrome中，li元素是20px而不是16像firefox，将菜单移动一点点
在safari和opera中我有相同的chrome问题。

请注意，opera，safari和chrome也有问题，我的分隔符是3px高和1px大，而在firefox上我可以正确地显示它。

我不知道为什么，但因为我在这个问题背后失去了2个晚上，我想我肯定需要一些帮助。

这是firefox的情况（你可以点击图片放大）：

在这里，您可以看到Chrome情况（一般来说是webkit）：

菜单的 css 是：

#menu
{
  bottom: 111px;
  height:  54px;
  width:   100%;
  top:     auto;
}

#menu-bar-top, #menu nav
{
  background-repeat: repeat-x;
  width:              inherit;
}

#menu-bar-top
{
  background-image:  url(../../img/Layouts/default/Hr-bottom.png);
  background-color:                                   transparent;
  border-style:                                              none;
  height:                                                    18px;
}

#menu nav
{
  background-image:  url(../../img/Layouts/default/Menu-background.png);
  height:                                                          36px;

}

#menu nav div
{
  text-align:  center;
  height:     inherit;
  margin:           0;
}

#menu nav ul
{
  list-style-type:         none;
  font-family:     Ethnocentric;
  font-size:              1.2em;
  padding:                    0;
  height:               inherit;
  margin:                     0;
  color:                  white;
}

#menu nav ul li
{
  position: relative;
  top: 10px;
  display:     inline;
  padding:          0;
  margin:           0;
}

#menu nav ul li.menu-separator
{
  background-position:                                     center center;
  background-repeat:                                           no-repeat;
  background-image:    url(../../img/Layouts/default/Menu-separator.png);
  font-size:                                                         1px;
}

#menu nav ul li a
{
  text-decoration:  none;
  padding:          10px 10px 8px 10px;
  margin:         0 -5px;
  color:           white;
}

#menu nav ul li a:hover
{
  background-position:                                                  0px 0px;
  background-repeat:                                                   repeat-x;
  background-image:    url(../../img/Layouts/default/Menu-background-hover-2.png);
}

虽然可以在此处找到 html ：

<section id="menu">
    <hr id="menu-bar-top" />
    <nav>
        <div>
            <ul>
                <li><a href="#">Home</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Lavori svolti</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Balbo e consorzi</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Ciao</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Etc...</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Etc...</a></li>
                <li class="menu-separator">&nbsp;</li>
                <li><a href="#">Etc...</a></li>
                <!-- ... other Etcs ...-->
            </ul>
        </div>
    </nav>
</section>

因为我认为 ul 给我带来的问题比它应该更多，我可以更改html标记（通知是html5），如果感觉有点不正确就没关系（比如仅使用div和span）。我真正需要的是一个交叉浏览器解决方案，任何建议表示赞赏。我不需要Ie6支持，我可以使用IE9和lasterversion of chrome，opera，safari，firefox。

请注意，我的菜单背景和鼠标悬停效果的背景都是渐变，所以我不能只使用颜色。

感谢您的任何建议，希望任何人都可以帮助我，因为我无法真正解决问题，我想避免每个浏览器使用各种CSS。

编辑1： 我不明白为什么我不能使分隔符高度达到我想要的水平，我把文本放在里面但绝对不符合我需要的大小，它是一个内联元素但是我不能把一个块元素放在一个内联元素中：\

编辑2： 好的我已经上传了整个网页的图形，我目前没有创建JSFiddle，但你可以看到网页并将其下载为ZIP文件：

View the webpage
Download the webpage（如果您不相信我只是从浏览器下载其他人）
JSFiddle

编辑3： 添加了JS Fiddle，但我无法在那里制作字体

Answer 1

在display:block - 代码上使用A。将菜单分隔符移动到A标记。</ p>

将您的LI更改为“inline-block”：

#menu nav ul li {
  position: relative;
  top: 10px;
  display: inline-block;
  padding:0;
  margin:0;
}

可能还有一些事情需要调整。没有图像的完整URL，很难远程模拟它。

Answer 2

我制作了一个小型演示：http://jsfiddle.net/3bydX/

我float修改了li元素以将其放入一行，其中a元素与line-height平均height所以文本垂直居中。

由于您可以更改标记，我删除了分隔符li并使用了pseude元素来实现此效果。这样你也可以摆脱非语义标记。

Answer 3

如果你可以在JSFiddle中编写一个例子，那将会有所帮助，但我会首先在li标签中添加float。这应该可以解决您的跨浏览器问题。以及其他调整

#menu nav ul li {
  position: relative;
  top: 10px;
  display: inline;
  padding: 0;
  margin: 0;

  /* Add this */
  float:left;
}

Answer 4

虽然Jona的答案对伪元素有很大的帮助（我不知道这可能是这样的事情），但它并没有完全回答我的问题：特别是，我使用了一个我的高度的一半我并没有使用float：left，而是只创建了以菜单为中心的问题。

相反，真正为我修复的一切是显示：阻止A标签，特别是显示：li标签的内联阻止。

这改变了标记行为的方式，以完成我想要的一些小调整。

我仍然有一些谷歌浏览器的小问题，但我认为与chrome（和safari）相关的事实是，字体是20像素高度而不是16像所有其他浏览器一样（不知道为什么），但它们并不是那么糟糕（文字降低4 px，我可以接受）。

以下是我用css构建的内容的完整编辑，使用Diodeus和Jona的答案，以及一个小的HTML标记更改：

<强> HTML：

  <section id="menu">
    <hr id="menu-bar-top" />
    <nav>
      <div>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Lavori svolti</a></li>
          <li><a href="#">Balbo e consorzi</a></li>
          <li><a href="#">Ciao</a></li>
          <li><a href="#">Etc...</a></li>
          <li><a href="#">Etc...</a></li>
        </ul>
      </div>
    </nav>
  </section>

<强> CSS：

/**
 *     Creates a font that should be used in all pages TEST
 */

@font-face
{
  font-family:                                                          Ethnocentric;
  src:                                              url('../files/ethnocentric.eot');
  src:         url('../../files/ethnocentric.eot?iefix') format('embedded-opentype'),
                                 url('../../files/ethnocentric.woff') format('woff'),
                              url('../../files/ethnocentric.ttf') format('truetype'),
                                   url('../../files/ethnocentric.svg') format('svg');
}

*
{
  padding: 0;
  margin:  0;
}

html, body
{
  max-height:               100%;
  overflow:               hidden;
  height:                   100%;
}

/**
 *     Change the basic background color of the page
 */
html
{
  background-image: url(../../img/Layouts/default/Background.png);
  font-family:                                  Arial, sans-serif;
  font-size:                                                 10px;
}

/**
 *     Helper to clear from float
 */
.clear
{
  clear: both;
}

input[type="radio"].radio-hidden
{
  position: absolute;
  display:      none;
  left:      -9999px;
  top:       -9999px;
}

header, #menu, footer
{
  background-repeat: repeat-x;
  position:          absolute;
  overflow:            hidden;
  bottom:                   0;
  width:                 100%;
  right:                    0;
  left:                     0;
  top:                      0;
}
header
{
  background-image: url(../../img/Layouts/default/Gradient-top.png);
  height:                                                     125px;
}

#content
{
  /*background-repeat:                                             repeat-y;
  background-image:  url(../../img/Layouts/default/Background-center.png);*/
  position:                                                         fixed;
  overflow:                                                          auto;
  margin:                                                   0 auto 0 auto;
  bottom:                                                           165px;
  /*width:                                                            789px;*/
  width: 77%;
  right:                                                                0;
  left:                                                                 0;
  top:                                                              112px;

  border-width: 2px;
  border-style: solid;
  border-color: black;
  border-top-width: 0;
  border-bottom-width: 0;
  background-color: #5E656A;
}

#menu
{
  bottom: 111px;
  height:  54px;
  width:   100%;
  top:     auto;
}

footer
{
  background-image: url(../../img/Layouts/default/Gradient-bottom.png);
  height:                                                        111px;
  top:                                                            auto;
}

header div
{
  margin-right:  auto;
  margin-left:   auto;
  padding-top:   16px;
  width:        788px;
}

#menu-bar-top, #menu nav
{
  background-repeat: repeat-x;
  width:              inherit;
}

#menu-bar-top
{
  background-image:  url(../../img/Layouts/default/Hr-bottom.png);
  background-color:                                   transparent;
  border-style:                                              none;
  height:                                                    18px;
}

#menu nav
{
  background-image:  url(../../img/Layouts/default/Menu-background.png);
  height:                                                          36px;

}

#menu nav div
{
  text-align:  center;
  height:     inherit;
  margin:           0;
}

#menu nav ul
{
  list-style-type:         none;
  font-family:     Ethnocentric;
  font-size:              1.2em;
  padding:                    0;
  height:               inherit;
  margin:                     0;
  color:                  white;
}

#menu nav ul li
{
  position:     relative;
  display:  inline-block;
  padding:             0;
  height:        inherit;
  margin:              0;
  top:               0px;
}

#menu nav ul li a
{
  text-decoration:         none;
  line-height:             15px;
  display:                block;
  padding:                 10px;
  margin:          0 -2px 0 1px;
  color:                  white;
}

#menu nav ul li a:hover, #menu nav ul li a:focus
{
  background-position:                                                    0px 0px;
  background-repeat:                                                     repeat-x;
  background-image:    url(../../img/Layouts/default/Menu-background-hover-2.png);
}

#menu nav ul li a:before
{
  background-image: url(../../img/Layouts/default/Menu-separator.png);
  position:                                                  absolute;
  content:                                                         "";
  bottom:                                                       33.3%;
  width:                                                          2px;
  left:                                                          -2px; /* negative width of the seperator */
  top:                                                          33.3%;
}

#menu nav ul li a.menu-first:before
{
  background: none;
  width:         0;
  left:          0;
}

/* reset the firsit item */
#menu nav ul li:first-child a
{
    margin-left: -1px;
}

#menu nav ul li:first-child a:before
{
    display: none;
}

#company-info, #webdesigner-info
{
  font-size:    0.9em;
  position:  absolute;
  color:      #8E8C8C;
}

#company-info
{
  margin-left: 16px;
  margin-top:  11px;
  left:           0;
  top:            0;
}

#webdesigner-info
{
  margin-bottom: 11px;
  margin-right:  16px;
  bottom:           0;
  right:            0;
}

您可以访问网页here（此链接不会持续）

水平菜单垂直和水平对齐鼠标悬停效果，如何创建一个crossbrowser解决方案？

4 个答案: