1

私はこのページ http://www.tripleagent.co.uk/index2.htmlを持っています (特定の時点でインデックスに変更されます) 私の問題は、画像の間に空白が表示されることです。Windows（Safari 5.1.7）およびAndroid（4.0）モバイルのSafariでのみ表示され、他のすべてのOSでは完全に正しく機能します（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

インラインブロックを使用するときは、常に空白をコメントアウトします。

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

または、親 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 に答える