Question

我在这里有一个布局：

https://dustinhendricks.com/breastfest/index.html

除了在IE7（或IE8兼容性视图）中工作正常，我认为内联块菜单元素不起作用，这在ie7上是可以预期的。我尝试了设置缩放的技巧：1和*显示：内联ie7，但似乎仍然没有工作。有什么想法吗？

HTML

<ul>
    <li><a href="#" class="selected" title="The Breastfest Homepage">Home</a></li>
    <li><a href="#" title="Learn more about The Breastfests">About</a></li>
</ul>

CSS

#main #header ul {
    float: right;
    clear: right;
    margin-top: 13px;
    margin-right: 12px;
    list-style: none;
    max-height: 45px;
}

#main #header ul li {
    display: inline;
}

#main #header ul li a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    height: 45px;
    color: #f0d8be;
    font-size: 20px;
    line-height: 45px;
    margin-left: 13px;
    letter-spacing: 1px;
    zoom: 1;
    *display: inline;
}

#main #header ul li a:hover {
    height: 47px;
    top: -2px;
}

#main #header ul li a.selected {
    background: transparent url(../images/menu-selected.gif) bottom center no-repeat;
}

注意：我还希望保持悬停效果不变。

Answer 1

对于IE7，对float:left使用LI，对display:block - 标记使用A。确保在块的末尾清除浮子。

Answer 2

#Element {
  zoom:1;
  *display: inline;
  _height: 30px;
}

这使得inline-block在IE6 + 7中工作。

样式必须是类/ ID的最后样式。

你设置的高度为你需要的任何东西。

Answer 3

问题是ul浮动了。不得不将其切换到绝对定位来修复。

ie7内联块技巧似乎不起作用

3 个答案: