0

数ヶ月前、小さな会社のサイトを作りました。彼らはそれについて非常に喜んでいました。今、私は同じ会社のために小さな e コマースを行い、それをサイト ベースに統合します。しかし、ie7 で調べていて、とんでもないことに気が付きました。ナビゲーションバーが正しく表示されません。リンクは、通常は横の行に表示されますが、縦の行に表示されます。これを修正する方法、これは緊急ですか？

ナビゲーションの CSS は次のとおりです。

.nav-ul  {
    margin: 0;
    padding: 0;
    position: absolute;
    left: -14px;
    top: 120px;
    background: #000;
    height: 31px;
    z-index:  2;
    width: 104%;
    background-image: nappulat/tyhja.png;
    background-repeat: repeat;
    text-align: center;
}

.nav-ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

.nav-ul li:hover {
    background-color: #b2080b;
}

.nav-ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-family: Verdana,  Geneva,  sans-serif;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 128px;
    height: 31px;
}

条件付きコメントは知っていますが、答えてくれますか?

4

3 に答える 3

3

IE7 (and IE6) has some serious bugs with inline-block.

The main bug is that it only works at all for elements that have a default display style of inline.

<li> tags have a default style of list-item, and therefore display:inline-block; won't work for them in IE7.

There are two solutions:

  1. Add a <span> or similar inline tag inside the <li> (or instead of your <li>) and style that as inline-block instead. This may or may not have the desired effect for you, depending on what you're trying to achieve.

  2. Use an IE CSS hack. You can make IE7 do what you want if you set display:inline; and zoom:1;. This combination will work in IE6 and IE7 in the way inline-block is supposed to work. You'll need to work out a way to make this only happen in IE6/7, though, because obviously you'll want it to use inline-block in other browsers. There are various CSS hacks that can target these browsers, or you could use conditional comments. Either way, it's messy, but the only real solution if you want to support IE7.

(which brings up the third option, of dropping support for IE7 in your site...)

于 2012-07-24T20:14:59.670 に答える
0

http://caniuse.com/inline-blockによると、IE 7 では完全にはサポートされていません (デフォルトでインラインである要素のみ)。ここで代替案について言及しています... http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

条件付きコメントは、IE7 で正常に表示されるバージョンがあり、新しいブラウザーでより適切に表示されるバージョンがある場合に役立ちます。そのため、ブラウザーのバージョンごとに異なるコードを使用します。

于 2012-07-24T20:11:41.337 に答える
0 
display: inline-block;
zoom:1;
*display: inline;

動作するはずです。有効な DOCTYPE セットがあることを確認してください。hasLayoutをトリガーするものが他にある場合は、「zoom:1」を削除できます。

于 2012-07-24T20:56:06.077 に答える