13

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

8 回答 8

1 
.addthis_default_style .at15t_compact
{
    float: right !Important;

}

重要的部分是“！重要”

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

于 2011-08-19T18:37:14.130 回答
1

如果您在 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>
于 2011-08-21T07:53:04.520 回答
1

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

于 2011-08-04T04:30:56.100 回答
1

只需将您网站的 HTML 从

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

至

<a class="...">
<span>share</span>
<span class="the_icon_class"></span>
</a>
于 2011-07-21T20:39:05.950 回答
1

试试这个

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

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

于 2011-08-04T05:04:38.673 回答
1

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

.addthis_default_style.addthis_toolbox span{
    line-height: 16px;
    float: right; /* this will move the span back over to the right */
}
于 2011-08-02T03:27:49.040 回答
1

@DanyW，我看到您的网站代码可能是您的class规格有问题。在您的产品页面中，您float:right在.addthis_default_style .at15t_compact&中指定float:left .addthis_default_style .at300bs。因此，在 Firefox 和 chrome 中它需要float:right，在 IE 中它float:left在其他页面中工作正常，因为你指定你的类比产品页面更清晰，你float:right现在指定#pageBottom .footerPanel .addthis_default_style .at15t_compact的优先级float:right增加了。

解决方案：写这个

#pageBottom .footerPanel .addthis_default_style .at15t_compact{float:right}

在产品页面

或者你这样做

.addthis_default_style .at15t_compact{float:right !important}
于 2011-07-27T09:29:09.187 回答
0

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

.addthis_button_compact{
    position: relative;
    padding:0 23px 0 0;
}
.addthis_button_compact span{
    position:absolute;
    right:0;
}
于 2011-07-21T22:13:51.770 回答