2011 - 03 - 11

html5 doctype下 图片默认有多余空白

Published by at 15:43 under 未分类

简短的htm5 doctype

<!DOCTYPE html>

替换掉原来老长的,几乎没什么人记住doctype,是目前各WEB标准人士 最推荐的方式

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

替换后,网站乍看起来基本没什么变化。

目前碰到第一个html5 的问题是,替换后图片下面会出现空白,就像原来在代码里<img />标签后换行的效果一样

e69caae591bde5908d

<a>
<img />
</a>

众所周知,如果在a加border,然后在<img />后换行,就会出现如上图的情况。

在用了html5 doctype后 <a><img /></a> ,就算<img />后不换行,也会出现上面图片的情况。

解决方法1:设置图片外容器font-size / line-height;
(因为所有图片都会出现这个情况,只要是图片,下方就会有空白,所有有图片的地方都要设置。。。很不靠谱)

解决方法2:设置容器over-flow:hidden;
(同上,所有地方要设置。。。 )

解决方法3:图片添加display:block;
(因为所有图片都会出现这个情况,只要是图片,下方就会有空白,都用display:block;的话,对于图片列表要再次重新定义,也不好)

解决方法4:图片添加float:left;
(理由同上,还要再解决清除浮动的问题)

解决方法5:图片添加vertical-align
(目前测试任意属性都可,相对影响几乎没有,暂时就把img的vertical-align 加到reset中吧)

11 responses so far

11 Responses to “html5 doctype下 图片默认有多余空白”

  1. jackon 24 三 2011 at 06:48

    好方法

  2. 维生素E胶囊on 08 四 2011 at 14:17

    还没有用过html5 所以不知道怎么弄。

  3. WILDEN气动隔膜泵on 08 四 2011 at 16:31

    还没接触过html5呢,不过听说它的强大了。

  4. 红球藻on 09 四 2011 at 10:05

    上次上海发布会的时候关注过,看起来很不错

  5. 青岛葡萄酒on 11 四 2011 at 14:14

    来看看咧~~踩踩

  6. 金顺道物流on 11 四 2011 at 14:15

    踩踩咧=

  7. 长沙汇众教育on 12 四 2011 at 10:02

    路过,踩踩,呱唧呱唧

  8. 宁波LED显示屏on 13 四 2011 at 15:45

    不知道为什么我老是把博主的名字记成伤心….郁闷

  9. gafishon 22 六 2011 at 15:38

    最后一个方法靠谱

  10. 悠悠on 18 八 2015 at 14:59

    我有很多这样子的图片,空白的都在中间,喜欢的话可以加我扣扣2044295539我可以发给你。

  11. 悠悠on 18 八 2015 at 15:00

    .=-=-=-=-=-=【昙花难现*君心难留】=-=-=-=-=-=-=-=-=
      云鬓朱颜金步摇,庭深幽梦回廊长。
      九重宫阙烟尘生,红颜一笑为君王。
      恩宠难寻贪旧梦,闲看风月两茫茫。
      昨日花红今日雨,凭栏望断羡鸳鸯。
      青丝叹,华发菱镜黯憔悴 佳期如梦梦难留,
      为何人,把酒话三千
      惆怅旧欢如梦,遥遥幽恨难禁 沧海桑田几多愁伤
      是谁说,一如侯门深似海
      而深宫,从来都是历代女子书写传奇的地方
      问情处,君王的宠不过是为了生存而参与的斗争
      说寂寞,只是胜利的附属品罢了
      梗璇朝政,那也是被岁月所逼迫
      夜深梦回,青丝化白头,菱镜黯妆容,
      佳期如梦,梦也难留,只剩指尖流年潺潺流走
      只是不悔,被一个人曾今好好疼爱过
      ╰ア忆昔年、旧童颜灬
      门牌:484037709
      欢迎众位的加入。

Trackback URI | Comments RSS

评论