AddThis按钮CSS问题
Posted
技术标签:
【中文标题】AddThis按钮CSS问题【英文标题】:AddThis buttons CSS problem 【发布时间】:2011-10-10 13:44:20 【问题描述】:我在 AddThis 论坛上问过这个问题,但到目前为止还没有任何答复。希望有人可以帮助我。
相关页面位于右下角http://preview.ami.co.nz/products。
如果在 Chrome 或 Firefox 中查看,“分享”一词位于橙色“+”AddThis 按钮的左侧。
但是,在 IE(至少 IE8 和 6)上,“共享”一词在右侧!它应该看起来像它在 Chrome 和 FF 上的样子,但我不知道 IE 对它做了什么。
为了让事情变得更加奇特 - 不同页面上的相同代码在所有浏览器中看起来都是正确的!查看http://preview.ami.co.nz
任何建议将不胜感激。
PS。这是我在这些页面上添加的标记:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" style="display: <%= SocialMediaVisibility %>">
<a class="addthis_button_compact">Share</a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e0a5ac2480330c8"></script>
<!-- AddThis Button END -->
【问题讨论】:
虽然我无法确定有问题的 CSS 导致它的行为如此,但我能够重现这一点。 与问题无关:仅供参考,对于编码练习,您的SocialMediaVisibility
变量应输出none
或inline
,就像今天您输出的那样:<div class="addthis_toolbox addthis_default_style" style="display: ">
女巫不是良好编码的好例子;)
【参考方案1】:
只需从
更改您网站的 html<a class="...">
<span class="the_icon_class"></span>
share
</a>
到
<a class="...">
<span>share</span>
<span class="the_icon_class"></span>
</a>
【讨论】:
【参考方案2】:浮点数是个老问题。其实ie9也有。 您可以添加一些样式来修复它:
.addthis_button_compact
position: relative;
padding:0 23px 0 0;
.addthis_button_compact span
position:absolute;
right:0;
【讨论】:
我认为已经接近了。结果是这样的:i1098.photobucket.com/albums/g374/AMI_DanyW/… - 不完全在那里,但我不确定下一步该做什么。 增加内边距:例如 padding:0 50px 0 0; DanyW,addthis 添加的规则比您添加的规则具有更高的特异性,因此 .addthis_button_compact 的填充不适用。尝试使用更具体的选择器,例如 #pageBottom .addthis_button_compact【参考方案3】:@DanyW,我看到你的网站代码可能是你的class
规范有问题。在您的产品页面中,您在 .addthis_default_style .at15t_compact
和 float:left
.addthis_default_style .at300bs
中指定 float:right
。因此,在 Firefox 和 chrome 中需要 float:right
而在 IE 中需要 float:left
并且它在其他页面中工作正常,因为你指定你的类比产品页面更清晰,因为你在 #pageBottom .footerPanel .addthis_default_style .at15t_compact
中指定 float:right
现在是优先级float:right
的数量增加了。
解决方案: 写这个
#pageBottom .footerPanel .addthis_default_style .at15t_compactfloat:right
在产品页面中
或 你这样做
.addthis_default_style .at15t_compactfloat:right !important
【讨论】:
我在开发网站上尝试了您的两个建议,但不幸的是他们没有做任何事情。【参考方案4】:这应该可以解决问题。只需将此规则添加到样式表的末尾即可:
.addthis_default_style.addthis_toolbox span
line-height: 16px;
float: right; /* this will move the span back over to the right */
【讨论】:
这对我没有用...所有按钮都沿容器的右边缘垂直堆叠 您是否准确复制了代码?把它放在样式表的末尾。我在所有浏览器中测试了代码,它对我有用。我唯一觉得很奇怪的是,在 IE 中,您的 css 链接有些疯狂/wax.axd/cache/eQOauGa04Wrfpxa$sO70Bg5D.css
而不是您的正常 ami.css
是的!我完全复制了代码。而那个疯狂的 css 链接是 Aptimize 缓存的结果。我在我们的开发环境中试用了您的代码,该环境没有运行 Aptimize。【参考方案5】:
http://preview.ami.co.nz/styles/ami.css
文件中有以下样式
.addthis_default_style .at15t_compact
float: right;
margin-left: 4px;
margin-right: 0;
在 FF 中,共享链接的跨度采用 float: right
,但在 IE 中,跨度没有正确浮动,因此您会在 addthis 按钮的右侧看到共享文本。
我认为将重要添加到浮动右侧会对您有所帮助。
float: right !important;
否则使用 IE 特定的样式。检查http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/和http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
【讨论】:
【参考方案6】:试试这个
.at300bs.at15nc.at15t_compact float:right;
由于某种原因,IE 被选择器阻塞并将其向左浮动,而不是向右浮动。
【讨论】:
【参考方案7】:.addthis_default_style .at15t_compact
float: right !Important;
重要的部分是“!重要”
应该修复这个奇怪的 IE 故障。
【讨论】:
【参考方案8】:如果您在 CSS 中添加“!important”,那么 Matthew 和 Pavel 的解决方案都可以使用。
或者您可以将“分享”一词移至单独的按钮:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button" style="float: left">Share</a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
</div>
您可能还需要考虑删除“addthis_default_style”类名,并自己定义样式(以避免在 AddThis 更改其 CSS 时出现问题)。这可能是这样的:
<div class="addthis_toolbox">
<a class="addthis_button">Share</a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
</div>
<style>
.addthis_toolbox
margin-top: -27px;
float: right;
.addthis_toolbox a
display: block;
float: left;
margin-left: 5px;
</style>
【讨论】:
以上是关于AddThis按钮CSS问题的主要内容,如果未能解决你的问题,请参考以下文章
Magento 1.9 安装了“AddThis”社交分享按钮,但我们的网站上没有出现社交分享按钮