1

在此处输入图像描述

firefox 是唯一没有显示出这种神奇差距的浏览器。我真的不明白为什么这个差距会老实说，我假设你们中的一些人已经遇到了这个问题并且有一个简单的解决方案我真的不明白为什么这个差距会老实说，我我假设你们中的一些人遇到了这个问题并且有一个简单的解决方案

这是我的 css 菜单代码 这是我的 css 菜单代码 这是我的 css 菜单代码

 #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;
      }

这是菜单 div 下方的 CSS 代码

#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;
}

老实说，我真的不明白为什么会出现这种差距，我假设你们中的一些人已经遇到过这种情况，并且有一个简单的解决方案

直接来自源代码

    <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>

将它们放在一条线上，看看是否可以消除您的差距。

<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 回答
1

将填充顶部从 7px 更改为 8px ->> padding:8px 10px 0 10px;

是的，我很确定我的 html 与它无关，这不是间距问题，因为我使用 php 来调用我的 li

于 2013-09-07T01:38:06.393 回答