AddThis按钮CSS问题

Posted 2023-03-06

【中文标题】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>