CSS отображается по-разному в разных браузерах

Question

У меня проблема с CSS, отображаемым по-разному в браузерах, в частности, в IE, хотя я мог бы попросить здесь о помощи, надеюсь, вы можете помочь мне с этим:))

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

Я тестировал в Firefox и Safari, и они выглядят нормально, в Internet Explorer они не выровнены, пятое изображение выводится в IE.Когда я тестировал IE с включенным представлением о совместимости, изображения выравнивались, но другие части веб-сайта перепутаны (например, галереи изображений)

Может кто-нибудь помочь мне с этим, пожалуйста?что делать?Я не знаю, является ли это дополнением или что вызывает это.Я знаю, что должен реализовать какой-то взлом IE, но я не знаю, что и как: (

помощь очень ценится:))

Спасибо

Answer 1

Прежде чем идти по безумному пути написания собственного CSS для каждого браузера (и, возможно, версии): избавьтесь от XHTML 1.0 Transitional doctype и перейдите к одному из строгих типов. Желательно html 4.01 строгий.

Уже одно это решит подавляющее большинство ваших проблем с боксом.

Дополнительная информация о типах документов:

Прочитайте обе страницы следующего сайта. Замечательные ссылки на странице 2.
http://www.communitymx.com/content/article.cfm?cid=85fee

http://www.alistapart.com/articles/doctype/

А для «легкого» чтения: http://hsivonen.iki.fi/doctype/

По сути, все браузеры имеют различные степени соответствия "стандартам". Все, что запускает режим «причуд» или является «переходным», следует рассматривать с подозрением. Однако, как только вы поймете, что такое doctype и ваш выбор вокруг него, вы полностью поймете, что происходит при любых различиях в отображении, с которыми вы сталкиваетесь.

Для меня одним из лучших способов обучения было создание простого плавающего макета div, управляемого CSS. У одних div хранятся изображения, у других был очень длинный текст, у всех была рамка, чтобы я мог видеть, где что-то ломалось. Затем я попробовал различные типы документов и просмотрел страницу в основных браузерах. Иногда различия были незначительными, как незначительно отличающиеся отступы по умолчанию или поля; иногда они были возмутительны, например, один браузер позволял наследовать стили, а другой нет.

У нас есть веб-приложение приличного размера (более 200 страниц) с довольно сложными требованиями к макету, и ЕДИНСТВЕННЫЙ «хак», который мне пришлось реализовать, заключался в том, чтобы заставить тег изображения (img) иметь значение display:block;, чтобы оно выглядело идеальным с точки зрения пикселей идентичны в каждом браузере, и мы не используем условные таблицы стилей и не выполняем анализ браузера любого типа.

Answer 2

После того, как ваша ссылка вытащит в CSS, поместите это:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Создайте вторую таблицу стилей с именем ie.css и просто измените части, необходимые для IE.

У вас также есть возможность добавлять версии:

<!--[if IE 7]>

например.

Answer 3

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

Answer 4

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