解决点点模板中底部出现20像素高白色多余区域

2012.11.07 分享 4124 人浏览 留言

大家有没有发现,在做点点主题的时候,如果碰到主题底部和背景色不一样的情况下(其实都存在的,只是背景色一样的话,看不出效果罢了),会很明显看到底部出现一条高20px的白色多余区域,而且同样的做法,在别的模板制作过程中是不会出现这种情况的,比如wp dz等等。

记忆碎片之前模板中多余的空白

 

苏达苏塔网站底部多余的空白

 

这个问题其实纠结我很久了,他会在 “IE89、火狐11.0、Opera11.64、Chrome 14.0.835.202、Safari 4.0.4(531.21.10)”出现,而其他版本中就不会有这个问题。而且无论你给body的css怎么加margin:0!important; padding:0!important;都是毫无效果,一度让我抓破了脑袋。

所以在主题制作过程中,我就直接无视他了,因为我一直没找到解决方法,后来只能用在底部div中加上margin-bottom:-20px;这种形式来消除多余的20px。这个解决方法在DD-Atheme1.5版本中用上了,但这真是没办法中的办法。

今天晚上,我终于发现这个导致这个讨厌的多余空白区域产生的原因了。

他就是<!DOCTYPE>声明

点点默认采用的是 <!DOCTYPE html>这一种最简单的形式,而这就是问题的关键,很简单的解决方法,用另一种声明替换即可。

我采用的方法为

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

即可,这样就不需要margin-bottom:-20px;这个语句啦...

我在想 当初官方怎么没有注意到这点呢...

好吧 看清楚了 原来真是底部的iframe作怪,可是纠结的是,他明明写了height:0了呀。

所以也可通过以下方法屏蔽

css方法

iframe{display: none;}//屏蔽所有ifrmae
iframe#diandian_controls,#cproIframe1,#cproIframe2,#cproIframe3{display: inline}//去除例外 比如顶部的关注本站 百度广告等

js方法

$('iframe').not('#diandian_controls,#cprpTframe1,#cprpTframe2,#cprpTframe1').hide();

通过屏蔽iframe方法经过测试不可取,因音乐 视频等采用的都是iframe加载,此法会导致音乐等也被隐藏   

最好还是等官方吧那个iframe中加个style="display:none" 吧...

教训就是,以后写代码别偷懒了...(这次是点点写好了的,所以 好多人中招了...)

PS:本站的点点自定义模板功能已经恢复了,所以 又有得折腾了....

文章地址:http://huilang.me/dd-doctype/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif