kzen.dev
Дополнительно
Вопрос

css div и span по-разному отображаются в браузерах. Как унифицировать?

У меня есть CSS-файл, который правильно отображается в FF12, но отличается в Safari и Chrome.

Если изображения не загружаются, посмотрите живой демонстрационный пример на http://beattrack.net/test.php.

Вот как это должно выглядеть и выглядит в FF:

FF correct css

А вот что происходит в Safari и Chrome:

Разница в Safari и Chrome

Вот соответствующие CSS и HTML:

<style type="text/css">
    #topbar p.infotext {
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 15px;
        color: #D8DFEA;
    }
    #topbar a.name, #topbar a.home {
        font-weight: bold;
        margin-top: 4px;
        line-height: 32px;
        font-size: 13px;
        text-align: right;
        color: #D8DFEA;
        padding-left: 12px;
        float: right;
        text-decoration: none;
        padding-right: 0px;
    }
    .divider {
        margin-top: 7px;
        line-height: 19px;
        border-right: 1px solid #5CCD3E;        
        float: right;
    }
</style>

<html>
  <div id="topbar">
    <a class="home" href="#">Home   <span class="divider"> </span></a>
    <a class="name" href="#"><?php echo $first_name . " " . $last_name . "   ";?>
    <span class="divider"> </span>
    </a>
  </div>
</html>
stevenspiel
stevenspiel
Редактировал вопрос 7-го июня 2012 в 10:59
Программирование
google-chrome
css
browser
divider
Этот вопрос имеет 1 ответ на английском, чтобы прочитать их войдите в свой аккаунт.

Добавление ширины должно заставить его работать.

#topbar a.home, #topbar a.name {width : 70px;}
0

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

.divider {
    position:relative;
    top: 7px;
    line-height: 19px;
    border-right: 1px solid #5CCD3E;        
    float: right;
}
0

Оказалось, что это была проблема с HTML.

Когда я удалил "&nbsp" после текста, все отлично заработало.

  <div id="topbar">
    <a class="home" href="#">Home
    <span class="divider"> </span></a>
    <a class="name" href="#">
    <?php
    echo $full_name." ".$tel;
    ?>
    <span class="divider"> </span>
    </a>
  </div>

Я буду рад любым отзывам о том, почему это сработало...

0
Похожие сообщества 15
HTML/CSS — русскоговорящее сообщество
6 455 пользователей
Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение. @javascript_ru @js_noobs_ru @frontend_ru Каналы: @defront @htmlshit 🟡 Ищешь чат? @it_chats 🟡 Мы всегда рады помочь, но у нас есть правила. ВАЖНО: http://nometa.xyz
Чат | Google Таблицы и скрипты
4 470 пользователей
канал: @google_sheets оглавление: @google_sheet_toc заказ работы: @namokonov правила чата: t.me/google_spreadsheets_chat/242967
Верстка сайтов HTML/CSS/JS/PHP
2 919 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
Frontend_ru
2 468 пользователей
Русскоговорящее сообщество фронтенд разработчиков Каналы: @frontendnoteschannel @defront Чаты: @bem_ru @javascript_ru @css_ru Важно! http://nometa.xyz
Чат — Типичный Верстальщик
2 373 пользователей
✅ Наш канал: @tpverstak Если не можете писать в чате, то перезайдите и подтвердите, что вы не бот, нажав на кнопку 🔥 ПРАВИЛА ЧАТА — @annblok/BygPgC3E7" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@annblok/BygPgC3E7 👍 За бан разбанов нет
JavaScript чат | HTML 5 & CSS 3
2 235 пользователей
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript. 💼 По вопросам: @dictor_inc ✏️ Правила: t.me/javascript_alert/3070 Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko