Проблема с кнопками AddThis

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

Решения Мэтью и Павла будут работать, если вы добавите «! Важное» в 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>

Answer 2

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

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

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

Answer 3

.addthis_default_style .at15t_compact
{
    float: right !Important;

}

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

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

Answer 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 right поможет вам.

  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 5

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

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

Answer 6

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

Answer 7

просто измените HTML вашего сайта с

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

на

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

Answer 8

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

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