13

<ul>と<li>タグで作成されたメニューがあります。セクション間に小さなセパレータを配置したい。セパレーターについては、背景色と短い高さをに設定するだけ<li>です。非常に見栄えがします...IE7を除いて、同じ内の<li>他のすべてのsよりも高さを短くすることを拒否しているようです。セパレータの高さ（高さ、行の高さ、フォントサイズ）に影響を与えるさまざまな方法を試しましたが、成功しませんでした。<li><ul><li>

IE 7でセパレーターの高さをそのままにして背景全体に色を付ける修正がありますが、それは実際には私が望む外観ではありません（セパレーターが大きすぎます）。<li>タグの高さを制御する別の方法を誰かが考えることができますか？

これがサンプルです-IE8で互換表示を切り替えると、問題が表示されます。

<style type="text/css">
.menu {
    width:100px;
}
.menu ul {
    list-style-type:none; 
    border-top: solid 1px red;
    padding: 0px;
    margin:0px;
}
.menu ul li {
    border-bottom: solid 1px red;
    padding: 0px;
    margin:0px;
    white-space:nowrap;
}
.menu ul li a {
    font-size: 13px;
    text-decoration: none;
    color: black;
    display: block;
    padding: 3px;
}
.menu ul li a:hover {
    color: blue;
    text-decoration: underline;
}
.menu ul li.separator {
    height:4px;
    background-color:red;
}

</style>

<div class="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li class="separator"></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

</div>
4

6 に答える 6

14

問題は、ie6/ie7 が空の要素をフォントの高さに拡張することです。font-size:0とline-height:0を追加することで、これを回避できます.menu ul li.separator。

より良い解決策は<li>、セパレーターの前にある に、より太い下の境界線を追加することです。

.menu ul li.sep {border-bottom-width:6px}

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="sep"><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>
于 2009-07-01T13:41:06.137 に答える
1

LIのcssをに設定しますdisplay: block;。

于 2009-07-01T12:45:12.850 に答える
1

liたぶん、次のように設定してみてください。

li{
   display:block;
   float:left;
   height:myHeight;
   clear:right;//may be necessary, can't check with IE7
}

これは私が同様の問題で行ったことです。

于 2009-07-01T12:57:45.617 に答える
0

line-heightに属性を追加してみました.menu ul liか？

それ以外の場合、代わりに水平ルール<hr>を区切り文字として使用してみましたか？水平方向のルールを使用している場合は、margin-topとmargin-bottomを設定して、0px何が起こるかを確認できます。IEと他のブラウザで同じように見えることを保証することはできませんが、少なくとも試してみました。=）

于 2009-07-01T12:54:38.743 に答える
0

Daniel A. Whiteの回答に加えて、行の高さを試して、テキストを垂直方向に中央揃えにし、必要な高さを作成することができます。

于 2009-07-01T12:54:42.037 に答える
0

以前の投稿で提案されたことを実行します。これらの変更が IE 以外のブラウザーで問題を引き起こしている場合は、次の手順を実行して、IE のみがそれらを使用するようにすることができます。

.selector {
    prop1 : val1; /* default value for all browsers */
    *prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}

これは、別のスタイル シートなどを含めるために特別なコメントをしようとするよりもはるかにうまく機能します。

于 2009-07-01T13:05:09.457 に答える