作為一個以内容為中心的網站,在文章結尾增加社會化分享按鈕是一種标配,使用Octopress也不例外,本部落格選用了加網的社會化分享按鈕。開始的時候一切順利,但是後來出現了一點小瑕疵,具體的情況如下圖
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICMyYTMvw1dvwlMvwlM3VWaWV2Zh1Wa-cmbw5CejpmdsRWMjR2cvwVN2MDM3gjMtUGall3LcVmdhNXLwRHdo9CXt92YucWbpRWdvx2Yx5yazF2Lc9CX6MHc0RHaiojIsJye.png)
究其原因
我們來看看出問題的HTML代碼。
linenos:false
1 2 3 4 5 6 7 8 9 | <div class="flash-video"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" id="JIATHISSWF" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <param name="allowScriptAccess" value="always"> <param name="swLiveConnect" value="true"> <param name="movie" value="http://www.jiathis.com/code/swf/m.swf"> <param name="FlashVars" value="z=a"> <embed name="JIATHISSWF" src="http://www.jiathis.com/code/swf/m.swf" flashvars="z=a" width="0" height="0" allowscriptaccess="always" swliveconnect="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> </div> |
---|
壓縮css代碼之後發現了這樣一段代碼。
linenos:false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | article img,article video,article .flash-video { -webkit-border-radius:0.3em; -moz-border-radius:0.3em; -ms-border-radius:0.3em; -o-border-radius:0.3em; border-radius:0.3em; -webkit-box-shadow:rgba(0,0,0,0.15) 0 1px 4px; -moz-box-shadow:rgba(0,0,0,0.15) 0 1px 4px; box-shadow:rgba(0,0,0,0.15) 0 1px 4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:#fff 0.5em solid } |
---|
這句話
border:#fff 0.5em solid
就會産生我們所看到的白色的遮擋。
解決問題
思路:對id為JIATHISSWF的Object不應用包裹flash-video的div即可。 需要修改的檔案為source/javascripts/octopress.js
這是原來的代碼
linenos:false source/javascripts/octopress.js
1 2 3 4 5 6 7 8 | function wrapFlashVideos() { $('object').each(function(i, object) { if( $(object).find('param[name=movie]').length ){ $(object).wrap('<div class="flash-video">') } }); $('iframe[src*=vimeo],iframe[src*=youtube]').wrap('<div class="flash-video">') } |
---|
這是修改後的代碼
linenos:false source/javascripts/octopress.js
1 2 3 4 5 6 7 8 9 10 | function wrapFlashVideos() { $('object').each(function(i, object) { if ($(object).attr('id') != "JIATHISSWF") { if( $(object).find('param[name=movie]').length ){ $(object).wrap('<div class="flash-video">') } } }); $('iframe[src*=vimeo],iframe[src*=youtube]').wrap('<div class="flash-video">') } |
---|
OK,到這裡就解決問題了,檢查一下看看吧。
其他
- 網站優化也是藝術
- 就這樣設計大型網站
- 極客:改變世界的創新基因