3
我使用寶石social-share-button與引導2.0在我的Ruby on Rails應用程序，但文本重疊的圖標，請幫助，如果任何人都可以提前解決問題與CSS 
社會共享的CSS問題
謝謝！
(function() {
window.SocialShareButton = {
openUrl: function(url) {
window.open(url);
return false;
},
share: function(el) {
var $parent, appkey, desc, get_tumblr_extra, img, site, title, tumblr_params, url, via;
site = $(el).data('site');
appkey = $(el).data('appkey') || '';
$parent = $(el).parent();
title = encodeURIComponent($parent.data('title') || '');
img = encodeURIComponent($parent.data("img") || '');
url = encodeURIComponent($parent.data("url") || '');
via = encodeURIComponent($parent.data("via") || '');
desc = encodeURIComponent($parent.data("desc") || ' ');
if (url.length === 0) {
url = encodeURIComponent(location.href);
}
switch (site) {
case "email":
location.href = "mailto:?to=&subject=" + title + "&body=" + url;
break;
case "weibo":
SocialShareButton.openUrl("http://service.weibo.com/share/share.php?url=" + url + "&type=3&pic=" + img + "&title=" + title + "&appkey=" + appkey);
break;
case "twitter":
SocialShareButton.openUrl("https://twitter.com/intent/tweet?url=" + url + "&text=" + title + "&via=" + via);
break;
case "douban":
SocialShareButton.openUrl("http://shuo.douban.com/!service/share?href=" + url + "&name=" + title + "&image=" + img + "&sel=" + desc);
break;
case "facebook":
SocialShareButton.openUrl("http://www.facebook.com/sharer.php?u=" + url);
break;
case "qq":
SocialShareButton.openUrl("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + url + "&title=" + title + "&pics=" + img + "&summary=" + desc + "&site=" + appkey);
break;
case "tqq":
SocialShareButton.openUrl("http://share.v.t.qq.com/index.php?c=share&a=index&url=" + url + "&title=" + title + "&pic=" + img + "&appkey=" + appkey);
break;
case "baidu":
SocialShareButton.openUrl("http://hi.baidu.com/pub/show/share?url=" + url + "&title=" + title + "&content=" + desc);
break;
case "kaixin001":
SocialShareButton.openUrl("http://www.kaixin001.com/rest/records.php?url=" + url + "&content=" + title + "&style=11&pic=" + img + "&aid=" + appkey);
break;
case "renren":
SocialShareButton.openUrl("http://widget.renren.com/dialog/share?resourceUrl=" + url + "&srcUrl=" + url + "&title=" + title + "&pic=" + img + "&description=" + desc);
break;
case "google_plus":
SocialShareButton.openUrl("https://plus.google.com/share?url=" + url);
break;
case "google_bookmark":
SocialShareButton.openUrl("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + url + "&title=" + title);
break;
case "delicious":
SocialShareButton.openUrl("http://www.delicious.com/save?url=" + url + "&title=" + title + "&jump=yes&pic=" + img);
break;
case "plurk":
SocialShareButton.openUrl("http://www.plurk.com/?status=" + title + ": " + url + "&qualifier=shares");
break;
case "pinterest":
SocialShareButton.openUrl("http://www.pinterest.com/pin/create/button/?url=" + url + "&media=" + img + "&description=" + title);
break;
case "tumblr":
get_tumblr_extra = function(param) {
var cutom_data;
cutom_data = $(el).attr("data-" + param);
if (cutom_data) {
return encodeURIComponent(cutom_data);
}
};
tumblr_params = function() {
var params, path, quote, source;
path = get_tumblr_extra('type') || 'link';
params = (function() {
switch (path) {
case 'text':
title = get_tumblr_extra('title') || title;
return "title=" + title;
case 'photo':
title = get_tumblr_extra('caption') || title;
source = get_tumblr_extra('source') || img;
return "caption=" + title + "&source=" + source;
case 'quote':
quote = get_tumblr_extra('quote') || title;
source = get_tumblr_extra('source') || '';
return "quote=" + quote + "&source=" + source;
default:
title = get_tumblr_extra('title') || title;
url = get_tumblr_extra('url') || url;
return "name=" + title + "&url=" + url;
}
})();
return "/" + path + "?" + params;
};
SocialShareButton.openUrl("http://www.tumblr.com/share" + (tumblr_params()));
}
return false;
}
};
}).call(this);/*
Creating a sprite from following images:
app/assets/images/sprites/social-share-button/baidu.png (16x16)
app/assets/images/sprites/social-share-button/delicious.png (16x16)
app/assets/images/sprites/social-share-button/douban.png (16x16)
app/assets/images/sprites/social-share-button/email.png (16x16)
app/assets/images/sprites/social-share-button/facebook.png (16x16)
app/assets/images/sprites/social-share-button/flickr.png (16x16)
app/assets/images/sprites/social-share-button/google_bookmark.png (16x16)
app/assets/images/sprites/social-share-button/google_plus.png (16x16)
app/assets/images/sprites/social-share-button/kaixin001.png (16x16)
app/assets/images/sprites/social-share-button/pinterest.png (16x16)
app/assets/images/sprites/social-share-button/plurk.png (16x16)
app/assets/images/sprites/social-share-button/qq.png (16x16)
app/assets/images/sprites/social-share-button/renren.png (16x16)
app/assets/images/sprites/social-share-button/tqq.png (16x16)
app/assets/images/sprites/social-share-button/tumblr.png (16x16)
app/assets/images/sprites/social-share-button/twitter.png (16x16)
app/assets/images/sprites/social-share-button/weibo.png (16x16)
Output files:
app/assets/images/sprites/social-share-button.png
app/assets/stylesheets/social-share-button.scss
Output size:
80x64
*/
/* line 32, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-baidu {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") 0px 0px no-repeat;
}
/* line 33, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-delicious {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -16px 0px no-repeat;
}
/* line 34, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-douban {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") 0px -16px no-repeat;
}
/* line 35, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-email {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -16px -16px no-repeat;
}
/* line 36, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-facebook {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -32px 0px no-repeat;
}
/* line 37, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-flickr {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -32px -16px no-repeat;
}
/* line 38, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-google_bookmark {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") 0px -32px no-repeat;
}
/* line 39, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-google_plus {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -16px -32px no-repeat;
}
/* line 40, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-kaixin001 {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -32px -32px no-repeat;
}
/* line 41, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-pinterest {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -48px 0px no-repeat;
}
/* line 42, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-plurk {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -48px -16px no-repeat;
}
/* line 43, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-qq {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -48px -32px no-repeat;
}
/* line 44, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-renren {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") 0px -48px no-repeat;
}
/* line 45, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-tqq {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -16px -48px no-repeat;
}
/* line 46, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-tumblr {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -32px -48px no-repeat;
}
/* line 47, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-twitter {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -48px -48px no-repeat;
}
/* line 48, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-weibo {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") -64px 0px no-repeat;
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
/* line 51, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-baidu {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") 0px 0px no-repeat;
background-size: 80px 64px;
}
/* line 52, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-delicious {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -16px 0px no-repeat;
background-size: 80px 64px;
}
/* line 53, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-douban {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") 0px -16px no-repeat;
background-size: 80px 64px;
}
/* line 54, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-email {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -16px -16px no-repeat;
background-size: 80px 64px;
}
/* line 55, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-facebook {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -32px 0px no-repeat;
background-size: 80px 64px;
}
/* line 56, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-flickr {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -32px -16px no-repeat;
background-size: 80px 64px;
}
/* line 57, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-google_bookmark {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") 0px -32px no-repeat;
background-size: 80px 64px;
}
/* line 58, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-google_plus {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -16px -32px no-repeat;
background-size: 80px 64px;
}
/* line 59, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-kaixin001 {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -32px -32px no-repeat;
background-size: 80px 64px;
}
/* line 60, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-pinterest {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -48px 0px no-repeat;
background-size: 80px 64px;
}
/* line 61, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-plurk {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -48px -16px no-repeat;
background-size: 80px 64px;
}
/* line 62, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-qq {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -48px -32px no-repeat;
background-size: 80px 64px;
}
/* line 63, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-renren {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") 0px -48px no-repeat;
background-size: 80px 64px;
}
/* line 64, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-tqq {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -16px -48px no-repeat;
background-size: 80px 64px;
}
/* line 65, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-tumblr {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -32px -48px no-repeat;
background-size: 80px 64px;
}
/* line 66, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-twitter {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -48px -48px no-repeat;
background-size: 80px 64px;
}
/* line 67, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
.social-share-button-weibo {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/[email protected]") -64px 0px no-repeat;
background-size: 80px 64px;
}
}<p>Below is the div in which I was getting issue all css and js are taken from gem source files The images cant be shown as I can't add gem images to this fiddle
</p>
<div class='social-share-button' data-title='26 jul y blog' data-img='' data-url='http://localhost:3000/blog/26 jul y blog' data-desc=''>
<a class="social-share-button-twitter" data-site="twitter" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
">Share To</span>"></a>
<a class="social-share-button-facebook" data-site="facebook" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
">Share To</span>"></a>
<a class="social-share-button-google_plus" data-site="google_plus" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
">Share To</span>"></a>
<a class="social-share-button-weibo" data-site="weibo" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-douban" data-site="douban" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-tqq" data-site="tqq" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-renren" data-site="renren" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-baidu" data-site="baidu" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-huaban" data-site="huaban" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-tumblr" data-site="tumblr" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
<a class="social-share-button-pinterest" data-site="pinterest" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
">Share To</span>"></a>
</div>
你能後的純粹的HTML按鈕？ –
我爲此添加了純HTML，請將其打開，以便其他用戶可以獲得其好處 – ajooba
我發現問題是由於社交分享gem翻譯文件丟失的原因所致。請將其手動添加到您的本地人。 https://github.com/huacnlee/social-share-button/tree/master/lib/generators/social_share_button/templates/config/locales – akshay