1. 苏葳的备忘录首页
  2. 软件

百度分享的微信二维码显示错位问题

百度分享 二维码 微信网站推广的社交因素很重要,如果你的读者在你的网站发现了篇精采的文章,或者一幅有趣的图片,他很可能希望把这些内容跟他的亲朋好友分享。提供分享功能不仅完善了网站的用户交互体验,类似于口碑营销的分享内容以几何级数传播,更会成为你的网站最好的免费广告。百度分享就是一个可以完成这样的分享功能的工具。使用百度分享,可以自动或在指定位置显示百度分享的图标。放置位置得当的话,浏览者可以轻松的一键把内容发布到自己的社交媒体工具上。

在百度分享主页上,我们可以看到百度分享有页面分享,图片分享,以及划词分享三种功能。这样用户不仅可以分享整个页面,也可以只分享一张图片,或者一段文字。百度分享支持许多种社交媒体,比如新浪,腾讯微博,人人网,开心网等。用户可以按需求定制需要的按钮。

在我的WordPress博客上,最初只是把默认的百度分享代码加进了页面。考虑到百度分享这种使用如此广泛的工具应该不会有什么问题,所以并没有认真测试过这个功能。但是最近抽出时间来观察了一下默认的百度分享按钮,感觉人人网已经逐渐失去人气,且跟博客主题不搭。而最火的微信倒没有显示出来。所以去网站上调整了一下按钮,隐藏了人人网图标,加上了微信图标。点击百度分享上的微信分享测试了一下,原来就是显示一个二维码,可以通过用手机上的微信扫描二维码把文章分享到微信圈子里。

但在博客中将新代码替换原先代码后,却发现一个问题。显示出来的微信二维码里,下面的文字被挤出框外了,非常难看。再仔细一看,二维码显示本身也是错位的。

百度分享的微信二维码显示错位问题

换了几种浏览器查看,都是如此结果。一时有点慌神,因为在页面中贴进去的百度分享代码里,前半段是页面元素,后半段是导入的JavaScript代码。对于商业化的js代码大家都有体会,通常会经过压缩而难以阅读。

但问题总是要解决。这个微信二维码在百度分享主页上测试时完全正常。那么就在本地再测试一下。在本地Web服务上建立了个空的HTML页面,把百度分享代码添进<body>里。然后在浏览器中查看,显示的二维码是正常的。这似乎说明,百度分享的微信二维码错位现象看来是跟我的博客代码有冲突。

在Chrome浏览器的开发者工具中查看这个只加了百度分享代码的空白HTML源码,发现百度分享在里面添加了许多内容。有脚本,iframe和div等。其中ID为“bdshare_weixin_qrcode_dialog_qr”的这个div明显就是微信二维码的容器。div内是一个table,点任一行tr元素,发现附在其上的有:

table td, table th, table tr{
    border: 1px solid #e6e6e6;
    font-family: arial;
    padding: 2px 5px;
}

这样的CSS样式,试试将border属性里的1px改为0px,二维码显示居然正常了。

细看这个样式,原来来自WordPress的style.css。百度分享自身并未对使用的tr标签进行定制,所以直接继承了上层的属性。那么问题就来了,无法预先估计百度分享代码会被加入什么样的网页里,对于需要以表格形式在页面上展示的微信二维码,如果页面本身已经修改了table相关标签的CSS属性的话,难道不会造成显示错误吗?

再查看table元素内的代码,发现table元素本身,及tr元素下的td元素,都在标签体内指定了style样式属性,比如border:0或border:none之类。由于CSS属性的就近原则,将会覆盖任何其它设置,这样就不会受其它style文件的影响。偏偏这个tr元素,在标签内却没有设置任何属性。导致其只能使用上级或全局CSS属性。为验证这一点,在Chrome的开发者工具中,手工编辑tr的HTML代码,看看二维码的实时显示有何变化:

百度分享的微信二维码显示错位问题

如上,我们在table内的前面若干行tr标签内加上style=“border:0”,由于tr标签过多,手工修改不便,后面的先不去管它。即使这样,也能从上边页面中看到二维码显示发生了变化:

百度分享的微信二维码显示错位问题

可看到,为tr增加过style属性的二维码上面一部份,已经显示正常,而下面没增加style的仍然处于错位乱码状态。

由此猜想,如果百度分享的JavaScript程序在页面中注入这个table结构时,也为二维码显示的tr标签加上style属性,强制覆盖掉可能导致错位的关键属性,是不是能够增强二维码显示的兼容性呢?

当然这就是百度的问题了,自己对Web前端设计也并不精通。由于本人使用的主题支持自定义CSS代码,所以本人增加了

#bdshare_weixin_qrcode_dialog_qr tr {
border-width: 0px;
}

一句,将百度分享中用于二维码显示的div里的tr标签去掉边框宽度。

保存后,百度分享的微信二维码显示正常了,如下所示:

百度分享的微信二维码显示错位问题

原创文章,作者:苏葳,如需转载,请注明出处:https://www.swmemo.com/1940.html

发表评论

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