Question

我目前在li元素上获得4px的边距，图像（图像突出显示）如此：

enter image description here

但这只出现在Fire-fox中，在chrome中没有边距。但我把所有内容都归结为CSS：

*{
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: baseline;
    font-family: 'Open Sans', sans-serif;
}

/* ------------- HEADER -------------- */

header{ 
    -webkit-box-shadow: 0 0 140px 0 #B0B0B0;
    box-shadow: 0 0 140px 0 #B0B0B0;
    position: relative;
}

header ul{
    text-indent:0;
}

header li{
    display: inline-block;
    width: 150px;
    color: white;
    text-align: center;
}

header li:first-child{
    width: 300px;
    color: black;
}

li.notices{ 
    background: #d80404; /* Old browsers */
    background: -moz-linear-gradient(top, #d80404 0%, #c90a0a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d80404), color-stop(100%,#c90a0a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d80404 0%,#c90a0a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d80404 0%,#c90a0a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d80404 0%,#c90a0a 100%); /* IE10+ */
    background: linear-gradient(to bottom, #d80404 0%,#c90a0a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d80404', endColorstr='#c90a0a',GradientType=0 ); /* IE6-9 */
}

导致这种情况的原因是什么？

http://jsfiddle.net/KJjVZ/

HTML：

<header>
    <div class="content">
        <ul>
            <li><img src="/core/css/img/ind.png" /></li
            ><li class="notices">
                <img src="/core/css/img/notices2.png" /></li
            ><li class="sessions">
                <img src="/core/css/img/sessions2.png" />
            </li
            ><li class="forum">
                <img src="/core/css/img/forums2.png" /></li
            ><li class="voting">
                    <img src="/core/css/img/voting2.png" /></li
            ><li class="support">
                <img src="/core/css/img/support2.png" /></li
            ><li class="login" role="login">
                <img src="/core/css/img/notices2.png" />
            </li>                   
           </ul>
    </div>
</header>

（需要用于下拉目的）

Answer 1

在大多数浏览器中，

inline-block元素之间存在间距效应..

请参阅Fighting the Space Between Inline Block Elements

相关信息：

这里有一笔交易：一系列格式化的内联块元素，就像你通常格式化HTML一样，它们之间会有空格。

解决方案1 ：删除空格

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

解决方案2 ：负边距

li {
    display: inline-block;
    margin-right: -4px;
}

Answer 2

另一个解决方案是font-size: 0：

body { font-size: 14px; }
ul { font-size: 0; }
li { font-size: 14px; }

示例：http://jsfiddle.net/rudiedirkx/NuwPR/

我认为重要的缺点是重复字体大小。您可能不知道每个LI的确切字体大小，因此您可能会指定很多案例。不幸的是，font-size: inherit使用了0。

firefox上的幻影图像/ li margin

2 个答案: