AddThis按钮CSS问题

Posted

技术标签:

【中文标题】AddThis按钮CSS问题【英文标题】:AddThis buttons CSS problem 【发布时间】:2011-10-10 13:44:20 【问题描述】:

我在 AddThis 论坛上问过这个问题,但到目前为止还没有任何答复。希望有人可以帮助我。

相关页面位于右下角http://preview.ami.co.nz/products。

如果在 ChromeFirefox 中查看,“分享”一词位于橙色“+”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 变量应输出noneinline,就像今天您输出的那样:&lt;div class="addthis_toolbox addthis_default_style" style="display: "&gt; 女巫不是良好编码的好例子;) 【参考方案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_compactfloat: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问题的主要内容,如果未能解决你的问题,请参考以下文章

捕获点击 addThis 按钮

Magento 1.9 安装了“AddThis”社交分享按钮,但我们的网站上没有出现社交分享按钮

php 使用AddThis共享按钮

markdown 添加社交分享 - AddThis社交分享按钮

AddThis 和 Google Page Speed

如何在垂直滚动上隐藏 addThis 插件