1

enter image description here

firefox is the only browser not showing this magic gap. i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution

here is my css menu code here is my css menu code here is my css menu code

 #tabs {
      font: bold 11px/1.5em Verdana;
      float:left;
      width:800px;
      height:35px;
      background:#FFFFFF;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
    margin:0;
    padding:7px 10px 0 10px;
    list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("images/tableft14.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("images/tabright14.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#000;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

This is the css code thats below the menu div

#main-lower {

    height: 700px;
    background-color:white;

}
#specials {
    background-color:#F0F0F0;
    width: 870px;
    height: 100%;
    float: left;
    border:1px solid #e2e2e2;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution

stright from source code

    <div id="tabs"> 
     <ul> 
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li> 
     </ul>
    </div>
4

2 に答える 2

3

<li>要素間に新しい行があると、リストに「不思議なギャップ」が生じることがよくあります。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

それらを 1 行に並べて、ギャップが解消されるかどうかを確認します。

<ul><li></li><li></li><li></li></ul>

それが機能する場合、これは次の複製です:インラインブロックリストアイテムの不要なマージン

あなたのギャップはあなたのリストの下にあるので、その下のアイテムのcss表示を調べて、そこの行も削除したいと思うでしょう. しかし、あなたのhtmlを見なければ、これはまったく問題にならないかもしれません!

インライン要素にギャップが表示される理由については、こちらを参照してください: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

抜粋：

これは「バグ」ではありません (私はそうは思いません)。これは、行に要素を設定する方法です。入力する単語間のスペースをスペースにしたいですか？これらのブロック間のスペースは、単語間のスペースのようなものです。仕様を更新して、インライン ブロック要素間のスペースを空けるべきではないと言っているわけではありません。

于 2013-09-06T22:50:45.757 に答える