1

我有这个页面 http://www.tripleagent.co.uk/index2.html （将在某个点更改为索引）我的问题是我看到图像之间的空白。它仅出现在适用于 windows (Safari 5.1.7) 和 Android (4.0) 手机的 Safari 上，对于所有其他操作系统，它都可以正常工作（我不关心 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

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

4

4 回答 4

3

使用 inline-block 时，我总是注释掉空格：

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

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

于 2012-10-06T20:08:17.040 回答
1

可能float:left会比display:inline-block?

于 2012-10-06T19:53:49.670 回答
1

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

就个人而言，我喜欢评论它：

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

如果您无法调整标记，则通过 CSS 浮动是最好的方法。

于 2012-10-06T20:09:07.967 回答
0

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

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

或者，您可以在 base64 中使用 @font-face 0 空格作为父 http://csscoder.ru/safari-5-1-7-win-eshhe-odin-xak-chtoby-pobedit-inline-block/ 或http： //csscoder.ru/examples/safari-inline-block/index.html

@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;
}
于 2013-03-27T04:58:01.990 回答