AddThis按钮CSS问题

Question

我在 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 -->

Answer 1

只需从

更改您网站的 HTML

<a class="...">
<span class="the_icon_class"></span>
share
</a>

到

<a class="...">
<span>share</span>
<span class="the_icon_class"></span>
</a>

Answer 2

浮点数是个老问题。其实ie9也有。 您可以添加一些样式来修复它：

.addthis_button_compact{
    position: relative;
    padding:0 23px 0 0;
}
.addthis_button_compact span{
    position:absolute;
    right:0;
}

Answer 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_compact{float:right}

在产品页面中

或 你这样做

.addthis_default_style .at15t_compact{float:right !important}

Answer 4

这应该可以解决问题。只需将此规则添加到样式表的末尾即可：

.addthis_default_style.addthis_toolbox span{
    line-height: 16px;
    float: right; /* this will move the span back over to the right */
}

Answer 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

Answer 6

试试这个

.at300bs.at15nc.at15t_compact { float:right; }

由于某种原因，IE 被选择器阻塞并将其向左浮动，而不是向右浮动。

Answer 7

.addthis_default_style .at15t_compact
{
    float: right !Important;

}

重要的部分是“！重要”

应该修复这个奇怪的 IE 故障。

Answer 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>