Веб-страница выглядит хорошо в Firefox, но любой другой браузер ненавидит ее

Question

Я пытаюсь создать свой собственный сайт, и он продвигается довольно хорошо. В Firefox он выглядел красиво, когда открывался и работал чудесно. Но затем я запускаю его в любом другом браузере, и он не работает. Как я могу это исправить? Interner Explorer особенно ненавидит это = [

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

http://opentech.durhamcollege.ca/~intn2201/brittains/chatter/

Пожалуйста, дайте решения, которые не включают JavaScript.

Answer 1

Различия в рендеринге между Firefox и Internet Explorer - действительно ежедневная профессия каждого, кто разрабатывает веб-страницы.

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

Кроме того, я бы порекомендовал вам загрузить такой инструмент, как IETester и проверить, в каких версиях IE происходит сбой на сайте. В IE8 он выглядит довольно хорошо, но встроенная рамка в 7. выглядит плохо 1007 *

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

В долгосрочной перспективе эти инструменты будут очень полезны:

• Firebug в Firefox (Щелкните правой кнопкой мыши любой элемент на своей странице и выберите «Проверить элемент ...», он даст вам кучу полезной информации

• Панель инструментов веб-разработчика в IE8 (нажмите F12, чтобы открыть ее), которая похожа, если не так мощна, как Firebug.

Answer 2

ОК, я посмотрел страницу в IE6.

Несколько советов.

1. Старайтесь избегать таблиц для разметки. Я признаю, что наложение необычной границы вокруг области «приветствия» намного проще при использовании таблицы на * *, чем на любой другой способ, но другие таблицы совершенно не нужны, и это является причиной большинства ваших проблем, потому что браузеры, в частности IE6 и IE7, любят делать свое дело, когда решают, как их выложить.

2. Как говорит Бобинс, расположение таблиц: исправлено в signupTable1 очень поможет

3. Также для IE6 помогает значение td, содержащее «welcome», высоту 100%.

4. Ширина полей элементов в ячейках в signupTable1 - это проценты от ширины ячейки в FF, но проценты от ширины экрана в IE6. Вы должны добавить некоторые целевые CSS IE6, чтобы компенсировать это.

Наконец, насколько я вижу, ваша разметка представляет собой безупречный полиглот HTML / XHTML, и его использование в качестве text / html и использование типа документа XHTML не должно вызывать каких-либо проблем.

Answer 3

Если бы я был на вашем месте, я бы не стал пытаться заставить сайт работать на старых браузерах, таких как IE 6.

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

Если Google может сказать, что IE6 больше не поддерживается ... то же самое можно сделать и у вас.

Теперь, если вы создавали этот сайт как занятие по зарабатыванию денег, а демографический охват включал значительный процент пользователей IE6, возможно, боль от поддержки древних нестандартных браузеров стоила бы того. Но в противном случае я бы сказал, что это не так.

Answer 4

Запутанные границы вокруг поля «приветствия» и шаткого центрирования объясняются тем, что вы используете таблицы «автоматического макета» для макета страницы. Это оставляет вас во власти алгоритма автоматического размещения таблиц, который в IE сложен, ненадежен и немного сломан.

Для мест, где вы должны использовать таблицы для чего-то более сложного, чем простые данные, установите table-layout: fixed в <table> и добавьте явные стили width в первой строке <td> с или <col/> элементы только внутри таблицы. Столбцы, которые вы оставляете без стиля width, будут разделять оставшуюся свободную ширину между ними. Установите явную высоту для строк, содержащих изображения фиксированного размера, чтобы они не разделяли высоту таблицы.

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

Answer 5

Во-первых, сделайте ваш HTML и CSS для проверки:

• HTML-валидатор: http://validator.w3.org/
• Валидатор CSS: http://jigsaw.w3.org/css-validator/

Затем, если ваш действительный код все еще не работает в конкретном браузере, найдите проблемный элемент HTML с помощью инструментов отладки / проверки браузера:

• Safari / Chrome: встроенный инспектор
• Firefox: отдельный плагин, среди лучших Firebug
• IE8: встроенный Инструменты разработчика
• IE6 / 7: необходимо загрузить и установить с Microsoft
• Opera: встроенные средства разработчика

Пока вы используете правильный CSS 2.1 , различия между современными браузерами должны быть минимальными или почти отсутствовать. Да, современные браузеры отлично справляются с реализацией стандартов, особенно если вы избегаете передовых, еще не полностью стандартизированных методов (CSS3, HTML5). (Мы прощаем и считаем IE8 «современным», несмотря на его поддержку только CSS 2.1, проблемы с PNG, медленную скорость JS и т. Д.)

О, одна вещь, не связанная с действительностью: всегда помните, что многие элементы пользовательского интерфейса (шрифты, кнопки и т. Д.) не отображаются в абсолютно одинаковых размерах в разных браузерах / платформах. Также размеры экрана могут сильно различаться из-за популярности мобильного просмотра. Вот почему вы должны предпочесть эластичные / плавные макеты и не полагаться на идеальный рендеринг пикселей.

Большинство ошибок IE 6/7 те же самые старые, повторяющие , и существует множество ресурсов для их исправления . Создайте отдельные таблицы стилей для IE и включите их, используя условные комментарии .

В качестве последнего комментария, пока используются открытые стандарты / технологии, лично мне было бы наплевать на поддержку десятилетнего браузера, кроме как в виде грациозной деградации , если только мне не заплатили щедро для этого. Браузеры могут свободно обновляться, нет причин не делать этого. Никаких оправданий. Мир не стоит на месте, шоу должно продолжаться, вы не увидите HD со своим старым тюбиком и т. Д.

Я также считаю, что мы, веб-разработчики, обязаны заставить большие массы внедрять новые (открытые) технологии, поскольку они экономят огромное количество нашего времени, позволяют улучшить работу конечных пользователей и т. Д., Список Преимущества бесконечны. Снова сравнение с другими отраслями: компании, занимающиеся производством бытовой электроники, продолжают выпускать новые вещи, хотя большинство людей с радостью использовали бы 20-летнюю технологию, если не были вынуждены обновлять свое (естественно консервативное) мышление.

Answer 6

Хорошо, я исправил 2 ошибки, наконец, понял их

изменен

#loginForm {

    float: right;

}

#loginTable {

    margin: 20%;
    margin-top: 14%;

}

до

#loginForm {

    float: right;
    margin-right: 5%;
    margin-top: 2.5%;

}

#loginTable {



}

и добавлено

<!--[if lte IE 7]>
    <style type = "text/css">
        #loginForm{margin-top:-157px}
    </style>
<![endif]-->

не решение, которое мне нравится, но одно, с которым мне придется иметь дело.

Ладно, все еще остается проблема: я слышал, что есть проблема 100% высоты, и мои горизонтальные границы не будут сохранять правильную ширину.

Answer 7

На вашей странице объявлен тип документа XHTML, но он не является действительным XHTML:

http://validator.w3.org/check?uri=http%3A%2F%2Fopentech.durhamcollege.ca%2F~intn2201%2Fbrittains%2Fchatter%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Кроме того, он возвращается с заголовком типа содержимого "text / html", который является неправильным для чего-то, что должно быть XHTML. К сожалению, правильный тип контента также не будет работать .

Итак, вам нужно сделать две вещи:

• Не используйте XHTML
• Подтвердите ваш HTML

Тогда вы можете начать думать о реальных несовместимостях браузера.

Answer 8

В Firefox 3.6.2 он выглядит так же, как в Internet Explorer 8. Однако старые браузеры являются злыми: поиск в Интернете для Internet Explorer + поля, потому что там, где Internet Explorer не работает.

Простой трюк: не используйте маржу.

position:absolute;
top: 80%
left: 100px;

А потом ... Google для конкретных вещей:)