Кнопки Tweet Link и Facebook «Нравится» и «Отправить» по горизонтали в Chrome, Safari и Firefox, но не в Internet Explorer 8 - PullRequest
Новая
       26

Кнопки Tweet Link и Facebook «Нравится» и «Отправить» по горизонтали в Chrome, Safari и Firefox, но не в Internet Explorer 8

0 голосов
/ 09 июня 2011

Приведенный ниже код отображает ссылку на твиттер API Twitter и кнопки «Нравится» и «Отправить» на Facebook. Они функционируют правильно.

Я хочу, чтобы они отображались горизонтально со ссылкой Tweet слева и кнопками Facebook справа, а также в Chrome, Firefox и Safari. Но в Internet Explorer 8 они не совсем горизонтальны. Порядок остается тем же, но ссылка Tweet находится ниже уровня кнопок Facebook. Скриншоты ниже.

Chrome:

enter image description here

Internet Explorer 8:

enter image description here

Как сделать так, чтобы в IE 8 они отображались горизонтально, как в Chrome?

Заранее спасибо,

John

код: 

 echo "<div class='commenttweet'>";

 echo "<a href='$url'>Tweet this</a>";

 echo "</div>";


 echo "<div class='commenttweet'>";

 echo "    ";

 echo "</div>"; 


echo '<table class="like">';
echo '<tr>';
echo '<td>';

echo '</td>';
echo '<td>';

echo '<div id="fb-root"></div>';
echo "<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
echo '</script>";

echo '</td>';

echo '</tr>';

echo '</table>';

echo '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">';

echo '<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>';

CSS: 

.commenttweet { 
            float: left;
            margin-left:20px;
            margin-top:15px;
            color: #004993;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 10px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

.commenttweet a{ 
            margin-left:0px;
            margin-top:15px;
            color: #004284;
            width:150px;
            border:2px solid #004284;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            text-decoration:none;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

.commenttweet a:hover{ 
            margin-left:0px;
            margin-top:15px;
            width:150px;
            background-color: #CAE1FF;
            color: #004284;
            border:2px solid #004284;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            text-decoration:none;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

table.like {
    float: left;
    margin-top: 5px;
    margin-left: 250px !important;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 550px;
    table-layout: inherit;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 100px;
    padding-left: 200px !important;
    padding-bottom: 0px;
    text-decoration: none;
    vertical-align: text-bottom;    

}

table.like td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 10px;
   width:100px;


}

Ответы [ 2 ]

0 голосов
/ 09 июня 2011

Я повторю то, что говорит bpeterson, вы не должны использовать таблицы для разметки.Я бы также порекомендовал использовать твиттер «Tweet Button», он прост в реализации и выглядит намного лучше - http://dev.twitter.com/pages/tweet_button

Что касается вашей проблемы, я бы подумал, что это проблема с пользовательским агентом CSS.Все браузеры имеют разные значения CSS по умолчанию, которые они используют.Вы всегда должны использовать хороший сброс, чтобы убедиться, что каждый браузер запускается в одну и ту же точку, чтобы ваш CSS работал как положено (или, по крайней мере, больше, чем в случае IE).

Попробуйте -

http://meyerweb.com/eric/tools/css/reset/

или

http://developer.yahoo.com/yui/reset/

0 голосов
/ 09 июня 2011

Для начала, не стоит расставлять элементы на столе. Div будет лучше всего для всего этого.

IE может немного узнать о float, padding и тому подобном. Вот почему всегда кажется более понятным «контейнировать» элементы, которые принадлежат друг другу, например, в этом случае, когда все это принадлежит одной строке. Я уверен, что есть решение этой точной проблемы, но я не уверен, что стоит идти вперед, используя таблицу.

Я бы лично сделал контейнерный div с двумя внутренними div-объектами с плавающей запятой, содержащими то, что вы хотите. Так, например: 

HTML
    <div class="container">
      <div class="floatleft">tweet button goes here</div>
      <div class="floatleft">facebook button here</div>
    </div>

CSS
    .floatleft {
       float: left;
    }

Вы можете обрабатывать интервалы через внутреннюю ширину div и / или поля / отступы.

Рассмотрим кнопку интерфейса пользователя Jquery для ссылки на твит. Это будет более привлекательная презентация, больше похожая на знакомый элемент пользовательского интерфейса, чем ссылка в окне.

...