三步解决网页广告显示错位问题

前段时间，不知道是因为自己升级了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>进行强制布局定位。