相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

HTML/CSS中是否有任何东西告诉浏览器完全忽略空格？

很多时候,当你想把两个图像放在一起时 - 你会拼命地保持HTML的可读性,但浏览器会在它们之间留一个空格.

所以不是这样的:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

你最终得到了这个

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

哪个太可怕了!

我正在尝试实现Chris Coyier 使用CSS列创建无缝响应图像网格的示例.

我把Chris的文件放到我的服务器上,一切都很好.我唯一改变的是实际图像.

现在,正如您在我的测试页面上看到的那样,只有4列图像而不是指定的5列,使用column-count:5;.第五列只是空格,没有内容.

仅当浏览器窗口大于1200px时才会发生这种情况.当浏览器窗口小于1200px时,媒体查询启动并减少列数4,3,2,最后1.换句话说,此错误仅在column-count:5及以上时发生

这种情况发生在FF 10,Chrome 17+和Safari 5+中.

任何帮助,将不胜感激!

这是修剪过的HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

这是未触动的CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img …

可能重复:
如何消除CSS中内联元素之间的间距？

如果我有两个并排的按钮,如下所示:

<input type="button">Test1</input>
<input type="button">Test2</input>

即使使用css重置,我在它们之间也会有一个小的差距.

我发现它是由空白区域引起的,如果我有这种格式的html:

<input type="button">Test1</input><input type="button">Test2</input>

一切都按预期工作,没有差距.

如何摆脱这个烦人的白色空间或否定它的效果而不格式化我的html可怕？