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