0

我想知道是否有任何技术可以用来删除浏览器中显示的空白而不牺牲 HTML 的可读性。

例如，将 HTML 放在不同的行上（使用它时更易于阅读）会在 div/spans/li 之间创建不需要的空白 - 非常令人沮丧。我能看到的唯一方法是将所有 HTML 推送到一行，这使得阅读/编辑和维护成为一场噩梦。

例如看到这些小提琴。

Fiddle 1具有可读的 HTML，但由于不需要的空白，图像被推到第二行。

Fiddle 2将 HTML 全部放在一行上，令人沮丧，但输出是正确的。

我想知道是否有办法解决这个问题，或者这只是我必须处理的事情？

对我来说，以下代码并不容易使用。

<div class="prodGrid">
    <div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div></div>
4

2 回答 2

2

有一些纯 CSS 解决方案，但我不推荐。我更喜欢将标记保留在单独的行上，但使用注释来“删除”空格，如下所示：

<div class="prodGrid">
    <div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div>
</div>

丑得要命，但目前我首选的方法，直到有一个合适的 CSS 解决方案。inline-block有太多有用的属性不能仅仅因为标记受到轻微影响就放弃它。

注意- 如果您确实采用这种方法，请注意 IE7。该浏览器中存在一个错误，这意味着注释被解释为 DOM 元素。因此，如果您使用一些稍微复杂的选择器，您可能需要采取将所有内容都放在一行上的方法。

于 2013-04-15T10:45:43.037 回答
0

习惯于vertical-align top你的img tag

像这样 

.prod img{vertical-align:top;}

演示

----------------

第二个是这个

.prodGrid{font-size:0;}
.prod img{vertical-align:top;}

演示2

于 2013-04-15T10:51:47.600 回答