Question

我想知道是否有任何技术可用于删除浏览器中显示的空白而不会牺牲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>

Answer 1

有一些CSS-only solutions，但我没有推荐。我更喜欢将标记保持在单独的行上，但使用注释来“删除”空白，like this：

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

丑陋如同地狱，但目前我的首选方法是proper CSS solution。 inline-block有太多有用的属性可以放弃它，只是因为标记略有不足。

注意 - 如果采用这种方法，请注意IE7。该浏览器中有a bug表示注释被解释为DOM元素。所以，如果你使用一些稍微复杂一些的选择器，你可能需要采用只需将所有东西放在一行上的方法。

Answer 2

用于vertical-align

上的top img tag

就像这样

.prod img{vertical-align:top;}

<强> Demo

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

第二是

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

<强> Demo2

处理HTML空白

2 个答案:

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