Проблемы с HTML-браузером на веб-сайте - PullRequest
Новая
       6

Проблемы с HTML-браузером на веб-сайте

2 голосов
/ 27 января 2011

Обычно я могу самостоятельно исправить свои ошибки HTML, поскольку это не так сложно, но на этот раз у меня сложная проблема.

Я решил изменить навигацию на своем веб-сайте, и большинство из них работает хорошо, и большинство браузеров отображают ее правильно.

Там, где моя проблема в том, что у меня есть запас в 5-6px, я не могу найти, откуда идет. Ссылка и изображение, показывающее мою проблему, будут ниже.

Моя вторая проблема заключается в том, что IE7 показывает огромную разницу, и опять же, я не могу определить, откуда он идет.

URL веб-страницы: Deaglegame.net и ниже изображение:

http://i.stack.imgur.com/2SBP9.png

Я ухожу на работу через пару часов, поэтому, если я не отвечу, это не потому, что я не хочу отвечать, я проверю эту ветку как можно скорее, но любая помощь очень ценится!

Спасибо всем, кто хочет помочь!

Ответы [ 4 ]

2 голосов
/ 27 января 2011

Проблема IE7 связана с представлением о совместимости.Это будет навязано вам по умолчанию, если вы посещаете страницу через адрес в интрасети.Вы можете обойти эту проблему, опустив нижний отступ и установив высоту 175px: для основного div.Похоже, что это также устраняет проблему с полем при запуске представления совместимости.

Список пунктов меню каким-то образом вызывает проблему с запасом за пределами представления совместимости, я бы посоветовал при запуске IE нажать F12 и открыть инструменты разработчикавот как я нашел эти настройки, которые нужно было отрегулировать.

1 голос
/ 27 января 2011

@ Исправление Ммеррелла для div#main должно решить одну половину проблемы. Далее следуют наблюдения @Bumble Bee за вашими ul#navigation li a span стилями. Заполнение элементов SPAN заставляет ваши ссылки выдвигать контент. 

/* deaglegame.css (line 48) */ 
#navigate li:hover a span, 
#navigate li.hover a span, 
#navigate li.active a span {
    /* removed  padding: 12px 0 0; */
}

/* deaglegame.css (line 30) */ 
#navigate li a span {
    cursor: pointer;
    float: left;
    height: 38px;
    line-height: 2.5;
    /* removed padding: 12px 0 0; */
    position: relative;
}

Бросьте на них отступы и установите свойство line-height. В общем случае лучше использовать line-height для вертикального позиционирования текста (это относится к содержимому как блочных, так и встроенных элементов) вместо padding.

0 голосов
/ 27 января 2011

Возможно, вы захотите в будущем использовать сброс YUI CSS (или, возможно, даже интегрировать его сейчас), http://developer.yahoo.com/yui/3/cssreset/.Я обнаружил, что это очень помогает мне при разработке кросс-браузерно-совместимых сайтов и почти исключает странные ошибки полей или отступов, с которыми я сталкиваюсь.

0 голосов
/ 27 января 2011

Проверьте изображение ниже, которое может решить вашу первую проблему. Попробуйте указать меньшее значение для отступа там. Для решения подобных проблем рассмотрите возможность использования такого инструмента, как firebug.

...