Попытка использовать положение: абсолютное для Facebook Как в IE7

0

У меня есть этот сайт: www.canalonesbastimar.com Я пытаюсь поместить кнопку facebook под номерами телефонов в IE7, но я не могу.. Я использую относительное положение для контейнера и абсолютную позицию для кнопки facebook.

<div class="tel-fb">
    <div class="telicon my-icons-telicon" style="float: left"></div>
    <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
      <div itemprop="telephone" class="telephone">
        <a href="tel:+622585749">622 585 749</a>
      </div>
      <div itemprop="telephone" class="telephone">
        <a href="tel:+636740393">636 740 393</a>
      </div>
    </div>
    <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>


  .tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }

ОБНОВИТЬ:

Я, наконец, добавил обертку для кнопки facebook как кнопка:

<head>
<style type="text/css">
.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.wrapper {
  position: absolute;
  top: 50px;
}
.jander {
  background: red;
}
.zero {
    margin-left: 50px;
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
}
.one {
  position: absolute;
  top:50px;
}
</style>
</head>
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=151887748332358";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="zero">

    <div class="wrapper">
      <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>
<div class="one">jfklas</div>
</div>
    <div class="tel-fb">
      <div class="telicon my-icons-telicon" style="float: left"></div>
      <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
        <div itemprop="telephone" class="telephone">
          <a href="tel:+622585749">622 585 749</a>
        </div>
        <div itemprop="telephone" class="telephone">
          <a href="tel:+636740393">636 740 393</a>
        </div>
      </div>
    </div>
</body>
  • 0
    Возможно, стоит поставить код, который вы используете, иначе люди не будут знать, где он идет не так. По совпадению, я всегда находил позиционирование Facebook как виджетов громоздким процессом.
  • 0
    вам может потребоваться установить z-индекс (т.е. причуду 7) для всех относительно расположенных родительских элементов. начните с кнопки facebook и продвигайтесь вверх по структуре html, проверяя каждый родительский элемент на предмет позиции: относительный и применяя соответствующий z-индекс
Показать ещё 4 комментария
Теги:

1 ответ

0
Лучший ответ

Ни один из css для вашего .fb-like класса не работает, потому что вы положили его в скобки для класса .tel-fb css.

Итак, это;

.tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }  // <--- Notice bracket here putting .fb-like and #tel inside .tel-fb

Должно быть;

.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;        
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.fb-like {
  position: absolute;
  top: 250px;
  right: 3px;
}

Стоит отметить, что ваш #tel css также находится внутри класса tel-fb, а это значит, что CSS, вероятно, тоже не будет работать.

Поделиться
  • 0
    @ Спасибо, я забыл сказать, что мой код соответствует файлу sass. Затем файл sass преобразуется в код, который вы упоминаете, как и должно быть.
  • 0
    Ах, хорошо. В каком случае я понятия не имею. Приведенный выше код работает на моем конце.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню