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" />

这太可怕了!


当前回答

试试这个CSS:

img { display: table-cell; }

其他回答

不幸的是,换行符也算作空格字符。

我提出的最好的解决方案是在标签内部使用空白,而不是在标签外部:

  <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" />

我知道这也不理想。但至少它不是一些奇怪的CSS黑客,依赖于一个空间字符的大小被渲染或诉诸于相对定位,或JavaScript:)

图像是默认的内联元素,这就是为什么你会看到它们之间有空格。如果你在屏幕阅读器上听你的例子,你马上就知道为什么了:如果没有空白,你会听到:

我的小东西,小东西,小东西,小东西

所以,用我的迷你东西。(点加空格结束)作为alt文本或推与CSS一起的图像。不要只是删除代码中的空白。

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

好吧,我可能是幸运的,因为我现在只需要担心让这个工作在webkit(特别是一个嵌入在QT),所以它在Chrome和Safari也工作。似乎display: table-cell拥有display: inline-block的所有优点,但没有空白的缺点(想想缩进的td)

这是一个简单的问题,但答案并不那么简单。

人们可以尝试避免源代码中的空格,这在CMS中并不总是可以实现,因为它们是由系统自动插入的。如果你想改变这一点,你必须深入挖掘CMS的核心代码。

Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.

因此,唯一的解决方案是使用CSS声明来处理空格处理过程。这不是任何标准的一部分(因为css3还没有完成)。

我更喜欢在HTML变体中没有空白。使用drupal作为CMS,这可以在你的template.php和主题文件中很容易实现。然后我选择内联块。

注: 在不同的浏览器中使用内联块相当复杂。 对于FF 2,你需要显示:-moz-inline-box。 其余的和IE8可以有display: inline-block后立即。 对于ie7,你需要在下面单独的声明中显示:inline(最好是通过条件注释)。

edit

我用来做一个元素内联块

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

试试这个CSS:

img { display: table-cell; }