Только Chrome искажает формат моего сайта

0

Мой сайт энтузиастов можно найти по адресу http://www.488.cyberpictures.net - он был просто составлен вместе с "Блокнотом" и справочником по HTML-программисту для версии 4. Я не являюсь экспертом в области тонкости веб-дизайна и любых используемых подпрограмм были найдены при поиске Google. Поэтому, когда я сталкивался с проблемой, я должен спросить экспертов сообщества.

Я проверяю вывод с помощью IE и Firefox и проверяю кодировку, и все выглядит отлично для меня, пока я не запустил свой веб-сайт в браузере Chrome. Форматирование было полным сокращением общей ширины таблицы намного больше, чем должно быть. Я попытался взломать проблему самостоятельно, но, по-моему, хуже, когда возвращаюсь к использованию IE или Firefox.

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

Теги:
google-chrome

1 ответ

0

Первоначальная проблема с отображением Chrome

Я посмотрел исходный код на вашей странице... использование align=center обычно не совместимо с более новыми страницами (например, страницами HTML5) и не должно использоваться.

Легкое решение вашей проблемы...

В главном DIV замените это:

<div align="center">

С этим:

<div style="max-width:800px; margin:auto">

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

Проблема с отображением Internet Explorer 8

Я считаю, что проблема, с которой вы работаете, очень специфична для IE в том, как она обрабатывает таблицы. Посмотрев на исходный код, я вижу, что вы используете три столбца, но из-за colSpan никогда не бывает более двух на одной строке.

IE 8 (а также 9, я считаю) имеет проблемы с шириной столбцов таблицы, когда все три столбца никогда не определены. Это приводит к разрыву макета. Исправление является чем-то вроде взлома, но выглядит так:

<div style="max-width:860px; margin:auto">

<table class="dxb2" cellpadding="0" cellspacing="0">
    <tr>
        <td width="200"></td>
        <td width="451"></td>
        <td width="205"></td>
    </tr>
    <tr>
        <td width="651" colspan="2" valign="top">

Если вы посмотрите на код выше, то, что я сделал, добавляется дополнительная строка в верхней части таблицы. Эта строка по существу пуста, и только цель состоит в том, чтобы определить все три столбца и дать им их ширину по умолчанию. Это исправляет проблему IE с их вычислением.

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

  • 0
    Спасибо за ваше время и предложение. Я, безусловно, исследую эту концепцию и будущие новости о HTML5.
  • 0
    Пожалуйста ... просматривая результаты в браузере, я уверен, что это решит проблему с отображением. Попробуйте и дайте мне знать, как это работает.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню