前段时间,不知道是因为自己升级了wordpress程序还是百度联盟的JS广告调整,网页调用的百度联盟JS广告素材显示出现错位,导致原本并排显示的120*600和160*600这两个广告位出现错位,有并排显示变为上下两个区块。于是,检查了一下火狐、IE、谷歌等浏览器都出现这种不兼容现象,在各个主流浏览器下都出现了网页广告显示错位的问题。下面就来分享下,热门手机棋牌游戏下载本人是如何解决JS广告位显示错位的问题。

网页错位

第一步、利用工具检查

很多时候,看到网页出现错位,显然就是CSS+DIV网页布局出现了问题;在寻找解决方案之前,我们一般都用firebug或者浏览器自带的一些相关功能来审查元素,找到出现错位的位置,查看CSS+DIV网页代码。

第二步、分析原因

利用第一步检查的一些情况进行进一步分析,从而找到出现错位的原因。总体来说,一般有内在原因和外在原因两种情况:

原因一:浏览器和CSS+DIV网页代码兼容性导致网页出现错位

原因二:放置网站广告位的JS广告本身的问题

第三步、解决问题

(1)针对第一种原因,由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见。我们可以利用CSS HACK 来改写CSS代码:

改写前:xxx. yyy:{width:290px;} (当设为IE7和Firefox下显示正常的290px时,IE6下会错位,改为280px,则IE6下正常,IE7和Firefox下显示不完美)

改写后:xxx. yyy{width:290px;* width:290px;_ width:280px;}(Firefox不认识*和_,而IE都认识*,IE7不支持_,IE6支持_

顺序千万不要乱,因为当出现重复定义时,浏览器默认按最后一下渲染,所以一定要先正常,再*,最后_。这样Firefox读取时只看到了正常的定义,而IE都能看到第二个*的定义,于是忽略第一个正常的定义,而IE中因为IE7不再支持_,所以按照第一个带*号的执行,IE6支持_,所以认为带*后的也是重复定义,予以忽略,执行最后一个定义。

(2)如果是第二种原因,因为很多的广告联盟都不允许修改广告的尺寸,因此虽然知道是JS广告本身尺寸的原因,这时我们就只能修改广告位的尺寸。就以热门手机棋牌游戏下载网为例,120和160这两个区块直接放入两段JS代码,出现了上述错位的问题,于是通过修改广告位尺寸,然后再两段代码中找到BAIDU_DUP_wrapper_对应的要设置的广告代号,然后对其利用类似<style>#BAIDU_DUP_wrapper_u104532_0{float:left; padding:2px  2px  2px   6px; }</style>进行强制布局定位。

也许你也感兴趣:

该日志由 热门手机棋牌游戏下载 于2014年03月04日发表在Css研究分类下,
转载请注明: 三步解决网页广告显示错位问题
关键字: , , ,
【上一篇】
【下一篇】

7 篇回应 (访客:5 篇, 博主:2 篇)

  1. tiandi 说道:

    我这也显示不出广告。

    #1楼
  2. Joe 说道:

    你这广告排列的倒是挺整齐的

    #2楼
  3. emehost 说道:

    内容分享的挺详细的,收藏一下

    #3楼
  4. 天长地久 说道:

    我的网页没广告

    #4楼
  5. Louis Han 说道:

    不知道为什么我那里显示不出来

    #5楼