HTML DIV и IMG теги между IE и FF - PullRequest
4 голосов
/ 09 февраля 2009

У меня проблемы с макетом простой HTML-страницы. Пожалуйста, помогите.

Вот макет, который я собираюсь ...

Макет http://img516.imageshack.us/img516/9637/layoutfk5.gif

  • оранжевый = корпус
  • синий / красный = рамка div
  • зеленый = изображение заголовка
  • черный / белый = раздел меню

В Internet Explorer это выглядит правильно, но в Firefox, Safari и Chrome между моим изображением (заголовок) и моим div (меню) есть разрыв в 4 пикселя.

Internet Explorer, Firefox, Safari и Chrome ...

Браузеры http://img516.imageshack.us/img516/3292/browserszi8.gif

Это мой HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    ...
    <body>
        <div id="frame">
            <img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
                <strong>One</strong> &nbsp;|&nbsp;
                <a href="two.html">Two</a> &nbsp;|&nbsp;
                <a href="three.html">Three</a> &nbsp;|&nbsp;
                <a href="four.html">Four</a> &nbsp;|&nbsp;
                <a href="five.html">Five</a> &nbsp;|&nbsp;
                <a href="six.html">Six</a> &nbsp;|&nbsp;
                <a href="seven.html">Seven</a> &nbsp;|&nbsp;
                <a href="eight.html">Eight</a> &nbsp;|&nbsp;
                <a href="nine.html">Nine</a>
            </div>
            <div id="content">
                ...
            </div>
            ...
    </body>
</html>

Обратите внимание, что между IMG и меню DIV нет пробелов.

Это мой CSS ...

...

div#frame {
    background: #FF0000;
    margin-right: auto;
    margin-left: auto;
    width: 700px;
    border: 5px #30AADE solid;
}

div#frame img#header {
    margin: 0;
    padding: 0;
    border: 0;
}

div#frame div#menu {
    margin: 0 auto 0 auto;
    padding: 5px 0 5px 0;
    border-top: solid 2px #FFFFFF;
    text-align: center;
    font-size: small;
    color: #88BE34;
    background-color: #000000;
}

div#frame div#menu strong {
    font-size: medium;
    color: #FFFFFF;
}

div#frame div#menu a {
    color: #88BE34;
}

Почему Firefox, Safari и Chrome демонстрируют разрыв в 4 пикселя?

Ответы [ 4 ]

4 голосов
/ 09 февраля 2009

Это связано с правилами по умолчанию для тегов IMG.

Я рекомендую всегда использовать это в вашей таблице стилей в качестве правила по умолчанию:

img{
    display:block;
}
1 голос
/ 13 февраля 2009

Вам следует заключить ссылки в меню в неупорядоченный список, а затем оформить элементы с помощью CSS. Есть несколько причин для этого:

  1. Структурирование ваших навигационных ссылок в виде списка приводит к большей семантической разметке. Это лучше представляет контент, который вы представляете. Если бы вы просматривали сайт вообще без стилей CSS (вы можете сделать это с помощью панели инструментов веб-разработчика для Firefox), вы все равно получили бы осмысленное представление макета вашего сайта. Это особенно важно, если вы хотите, чтобы сайт просматривался мобильными браузерами.

  2. Это также может (немного) помочь поисковым системам расставить приоритеты в контенте и повысить ваш рейтинг.

  3. Вы можете определить стиль для элементов списка с рамкой на одной стороне и некоторыми полями, чтобы получить эффект «разделитель трубы». Это будет многоразовым и поможет в будущем изменить меню на другой стиль.

См. Отдельный список - Дизайн CSS: укрощающие списки

Существует пример, показывающий полный CSS для достижения этого эффекта.

1 голос
/ 13 февраля 2009

В «стандартных» браузерах (и на самом деле IE6 с правильным DOCTYPE!) Ваше изображение по умолчанию находится в режиме INLINE, поэтому оно получает интервал, как будто это буква, лежащая на базовой линии текста.

freelookenstein дал решение убрать лишние пробелы из-за выравнивания текста в режиме INLINE.

Это решение, но я бы позаботился об использовании display: block по умолчанию, так как он, скорее всего, испортит содержание вашей типичной веб-страницы.

Вы можете добавить свойство display: block к классу или встроенный стиль только для вашего изображения.

Или как-то так:

img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }

Лично я бы рекомендовал ограничить отображение: блокируйте только те изображения, которые, как вы знаете, используются для макета сайта, или те, которые специально вставлены в поля. В этом случае часто у вас уже есть класс родительского элемента, например:

<div class="imagebox">
   <img .... />
</div>

.imagebox img { display:block; }
1 голос
/ 09 февраля 2009

Я предполагаю, что это высота строки строки image-elements, поскольку IMG является встроенным элементом. Возможно, вы могли бы это исправить, указав img # header display: block;.

В любом случае, что вы действительно должны сделать, это удалить все изображение и использовать элемент H1 плюс один из множества методов замены изображения.

Edit: Когда это сказано, ваше меню также должно быть помечено как неупорядоченный список (UL).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...