3

当我预览它时，它不会出现在 safari 中，但它会出现在其他浏览器中。

这是 jsfiddle。

您可以看到“投资组合”列表项在每个项下都有大约 2 个像素的空白。这是从哪里来的？我已将填充和边距设置为 0 和 nowrap 但无法找出任何其他原因......任何想法？

* { 
    margin:0; 
}
html, body { 
    height:100%; 
}
body {
    background-color:#fff;
}
#leftnav {
    background-color:#232323;
    width:20%;
    min-height:100%;
    height: auto !important;
    float:left;
    text-align:center;
    padding:75px 0 0px 0px;
    position:fixed;
    left:0;
    top:0;
}
#portfolio {
    white-space: nowrap;
    text-align:center;
    margin:0;
    width:80%;
    float:right;
}
#portfolio ul {
    margin:0;
    padding:0;
}
#portfolio li {
    width: 25%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin:0;
    padding:0;
    float:left;
}
#portfolio img {
    max-width:100%;
    margin:0;
    padding:0;
}
#maintop {
    width:80%;
    height:45%;
    background-color:#caab7e;
    float:right;
    text-align:center;
}

<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>
4

3 回答 3

3

它来自字体大小/行高。要么添加：

#portfolio li {
  font-size: 0;
}

或者：

#portfolio li {
  line-height: 0;
}

导致这个更新的小提琴。

于 2013-01-13T15:25:10.580 回答
0

我也不知道那个空白是从哪里来的，但是你可以设置li{ height: 87px; }它会使空白消失。

于 2013-01-13T15:16:04.330 回答
0

Opera浏览器也没有空间。我正在使用firebug插件在firefox中检查它，我可以看到img的高度是285px，li的高度是290px。现在，当我为 li 添加高度 285px 时，空间消失了。

#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}
于 2013-01-13T15:27:04.830 回答