Question

我有这个页面 http://www.tripleagent.co.uk/index2.html （将在某一点变为索引）我的问题是我看到图像之间有空白。它只出现在Safari for Windows（Safari 5.1.7）和Android（4.0）手机上，对于所有其他操作系统，它的工作方式完全正确（我不关心ie8及以下）。有一个删除html中的空格的解决方案......但它变得不可读。一世我希望能用这样的可读格式......

<figure>
<a href="projects.html"><img src="images/squares/mosaics0001.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0002.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0003.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0004.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0006.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0061.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0062.jpg"></a>
<a href="projects.html"><img class="gif" src="images/squares/animgif/mosaic1.gif"></a>
<a href="projects.html"><img src="images/squares/mosaics0008.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0009.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0010.jpg"></a>

<a href="projects.html"><img src="images/squares/mosaics0005.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0012.jpg"></a>

<ul class=nav><a href="projects2.html">projects</a></ul>
<a href="projects.html"><img class="gif" src="images/squares/animgif/mosaic2.gif"></a>
<a href="projects.html"><img src="images/squares/mosaics0015.jpg" ></a>
</figure>

我还尝试了0大小的字体和单词间距技巧，但它们不起作用

figure
{
    background: rgb(0,0,0);
    width : 100%;
    max-width: 800px;
    display: inline-block;
    font-size: 0;
    text-decoration:none;
    word-spacing: -.43em; 
}

我尝试使用<li></li>消除空白，但无法在中间平铺，如该页面所示。 http://www.tripleagent.co.uk/index.html

我对这一切都很陌生，如果我遗漏了一些非常基本的东西，我就会徘徊。

Answer 1

使用内联块时，我总是注释掉空格：

<!-- the usual inline-block thing...
--><div class="inlineBlockThing">foo</div><!--
--><div class="inlineBlockThing">bar</div><!--
--><div class="inlineBlockThing">baz</div><!--
... all done -->

这消除了差距并使其更具可读性。

Answer 2

可能float:left会比display:inline-block更好吗？

Answer 3

有几种方法可以对抗这个空间：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

就个人而言，我赞成将其评论出来：

<img /><!--
--><img /><!--
--><img /><!--
--><img /><!--
--><img />

如果您无法调整加价，则通过CSS进行浮动是最好的方法。

Answer 4

您好，您可以使用父母（图）

display: table;
font: 0/0 sans-serif;

或者你可以在base64中使用@ font-face和0空格表示父{4}}或http://csscoder.ru/safari-5-1-7-win-eshhe-odin-xak-chtoby-pobedit-inline-block/

@font-face {
font-family: 'inline-block';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA8AAAAABjAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcZhKVeUdERUYAAAF0AAAAHAAAACAAMgAET1MvMgAAAZAAAABDAAAAYG8LT11jbWFwAAAB1AAAAE0AAAFawBQnGWN2dCAAAAIkAAAABAAAAAQARAURZ2FzcAAAAigAAAAIAAAACAAAABBnbHlmAAACMAAAAGEAAABoJ54Dp2hlYWQAAAKUAAAALgAAADb7cuTdaGhlYQAAAsQAAAAdAAAAJAgAB95obXR4AAAC5AAAABQAAAAUFuwARGxvY2EAAAL4AAAADAAAAAwAWACMbWF4cAAAAwQAAAAfAAAAIABJADluYW1lAAADJAAAAOMAAAHgJGtDI3Bvc3QAAAQIAAAAMQAAAEPCf+Zpd2ViZgAABDwAAAAGAAAABpymUMgAAAABAAAAAMw9os8AAAAAzOalhQAAAADM7k0keNpjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3jaY2BmY2CcwMDKwMJqzHKWgYFhFoRmOsuQxpQG5AOl4ICRAQmEeof7MTgw8D5gYEv7B1TJOotBA02NAgMjABIYCh4AeNpjYGBgZoBgGQZGBhAIAfIYwXwWBgsgzcXAwcAEhAwMvAwKDxj+/wergrEZ/3/9/1iBBaoXChjZGOACjCCdTAyogBFi5XAGAHUwCw0AAAAARAURAAEAAf//AA942mNgYnBhYGBKYQ1lYGZgZ9DbyMigb7OJnYXhrdFGNtY7NpuYmYBMho3MIGFWkPAmdjbGPzabGEHixoKKgqqKgoouTAr/VBhn/MtgDf212oXlLAMDAyMDEjBkAACuEhZiAAAAeNpjYGRgYGBkcJSTmSUez2/zlUGegwEEzrzzVUWmmVJYQ4EUBwMTiAcA8dIIFwAAeNpjYGRgYJ31/wYDAwcDCDClMDAyoAJWAFJhAuwAAAAC7ABECAAAAAgAAAAAAAAABAAAAAAAACwALAAsACwANHjaY2BkYGBgZeBgYGIAARDJyAASc2DQAwkAAAScAIMAeNqljs1OwkAUhb8RMLAxxgVL06UbSFsk/CWsCBsTQjTK2lZUAkLCnz4ivApPwWE61NitaebOd86993SAEktymHwJwzU4vuBKKuEc99w6zuPx6LjAT7p7qYmD4xs8U3S8o2zuHO/xTZc5Y76V0mchXittzAcbZrwqLaCKry+gwzMPjBiIkp3zRiWzk030Mv0XqSUrJrbv/fnHkCc5ifp1PzW5Jrbz23SjSkO1w5dSp8o8zbzLnSk5IhTV7WlSk2r989UjqUj5527yhpP7JtXTHVs3tNWnrVOzNZAT2js8As27QLYAeNpjYGIAg//pDGkM2AArAwMjEyMzAzMjC1t6TmVBhiF7aV6mgYGBC4h2BTIAv3wIjQAAAAABUMicpQAA) format('woff');
}
figure {
font-family: 'inline-block';
font: 0/0 sans-serif;
}

如何在图像的内联块设计中摆脱空白？

4 个答案: