Zao’s Blog
感谢上天,我不是一个人在战斗!
炒股开户,证券网上开户,不限资金佣金万1.5包含规费,量大手续费万1.3,QQ 860100868
十一月
27

令人费解的空格

标签:, | 浏览:(0)

可能你已经注意到了,无论怎么调整你的css,网页的表现和你的想象总是有所不同,比如间距、宽度。现在我说说间距。也许你不知道,网页中有些莫名其妙的间距并不是css写得不正确所致,而是HTML代码中的空格惹的祸!

下面是一个测试网页(测试一):

  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.     <title>TEST</title>
  5.     <style type="text/css"><!--
  6.     div {padding:0;border:1px solid #f00;}
  7.     img {border:0;margin:0;width:100px;height:100px;}
  8.     -->
  9.     </style>
  10. </head>
  11. <body>
  12. <div>
  13.     <img src="test.gif" alt="test" />
  14.     <img src="test.gif" alt="test" />
  15. </div>
  16. </body>
  17. </html>

你会发现,尽管你在css中已经设置无间距,但在三大主流浏览器IE、FireFox、Opera中依然会出现间距。

下面我们分别定义:
图片和div顶部的间距=上;图片和div左边间距=左;图片之间间距=内;图片和div底部的间距=下。
有间距=1;无间距=0。
浏览器:IE6和IE7;FireFox2.0.0.9;Opera9.23

用上面的代码测试时,得到结果如下:
IE:上=0;左=0;内=1;下=1
FireFox:同IE
Opera:上=0;左=0;内=1;下=0

换一下代码(测试二):

  1. <div>
  2.     <img src="test.gif" alt="test" />
  3.     <img src="test.gif" alt="test" /></div>

结果:
同测试一。

再改变代码(测试三):

  1. <div>
  2.     <img src="test.gif" alt="test" /><img src="test.gif" alt="test" />
  3. </div>

结果:
IE:上=0;左=0;内=0;下=1
FireFox:均为0
Opera:同FireFox

再改变代码(测试四):

  1. <div>
  2.     <img src="test.gif" alt="test" /><img src="test.gif" alt="test" /></div>

结果:
三大浏览器均为0

结论:
<div><img>之间的空格三大浏览器均忽略。<img><img>之间的空格三大浏览器均显示。<img></div>之间的空格只有IE显示。
那为什么测试二中,IE和FireFox均有下间距呢?这是因为两个img之间有空格,空格是一种字符,在FF和IE中默认字符和图像是不在同一底线的!而Opera则在同一底线,所以会看到这种结果。

解决:
网页中有图像代码时,注意去掉这些多余的空格、换行符(尽管这似乎不利于对代码的阅读)。据我观察,这些多余的空格似乎只有当网页中有图像代码时才表现出来。 :mad:

3 条评论 | 发表你的评论

连文档头都不对

这样子

写得好~哥们 :grin:

发表评论





改变评论框高度:增大(+) | 减小(-)

DO NOT Fill!