Проблемы с кнопкой AddThis

Я задал этот вопрос на форуме AddThis, но пока не получил никаких ответов. Надеюсь, кто-то может помочь мне в этом.

Эта страница находится на http://preview.ami.co.nz/products в нижнем правом углу.

При просмотре в Chrome или Firefox слово "Share" находится слева от оранжевой кнопки "+" AddThis.
Однако в IE (по крайней мере, IE8 и 6) слово "Share" находится справа! Он должен выглядеть так, как в 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 -->

Ответ 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

@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}

Ответ 3

Это должно сделать трюк. Просто добавьте это правило в конец своего стили:

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

Ответ 4

У вас есть стиль ниже в 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 диапазон не принимает float вправо, из-за этого вы видите общий текст с правой стороны кнопки 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

Ответ 5

Попробуйте этот

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

По какой-то причине IE перебирает селектор и плавает влево, а не вправо.

Ответ 6

.addthis_default_style .at15t_compact
{
    float: right !Important;

}

Важной частью является "! Important"

Должен исправить этот странный сбой в IE.

Ответ 7

И решения Matthew и Pavel будут работать, если вы добавите "! important" в CSS.

Или вы можете переместить слово "Поделиться" на отдельную кнопку:

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

Ответ 8

Это старая проблема с поплавками. Фактически даже ie9 имеет его. Вы можете добавить некоторые стили, чтобы исправить это:

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