2015-02-06 3 views
-6

У меня есть проект, где мы должны создать портфель нашей работы. Но есть проблема:Сайт выглядит по-разному в браузерах

Если вы посмотрите на my site и нажмите ссылку «О себе», в нижней части вкладки, которая отображается.

В Chrome работает иначе, чем в IE и Firefox. В IE и Firefox текст в нижней части вкладки отключается, а в Chrome отсутствует.

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

Я не включил jsFiddle, так как я не уверен, в чем проблема.

+0

Почему downvotes?Что относительно вопроса недействительно, хотя это большой вопрос? – Subvenio

+0

См. [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve). – Oriol

ответ

-1

Не все браузеры используют один и тот же механизм рендеринга или следуют тем же правилам. Вот почему они все выглядят по-другому в вашем случае. Браузер Opera фактически придерживается лучших рекомендаций HTML. К сожалению, они не всегда будут одинаковыми, и это постоянная проблема для разработчиков. Я бы использовал как можно более строгий CSS, поскольку браузеры, как правило, более строгие правила CSS.

Надеюсь, это помогло. Удачи.

+0

"* Браузер Opera фактически придерживается лучших рекомендаций HTML *. По каким критериям? – Oriol

+0

@Oriol По стандартам W3C браузер Opera является наиболее совместимым. И действительно ли это стоит? lol ... во всяком случае, я думаю, что мой ответ заслуживает поддержки. Я дал объяснение, почему у ОП есть эта проблема, а также советы, помогающие ОП исправить его проблему. – racecarjonathan

+1

Браузер Opera также показывает, как я должен был спроектировать мой сайт, согласно хром. Спасибо за информацию. – Subvenio

0

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

Например, Firefox использует «геккона:»

-moz-внешний вид CSS свойство используется в Gecko (Firefox) для отображения элемента с использованием платформы родной стиль, основанный на тему операционной системы.

Так что Firefox использует Gecko, Chrome использует Webkit, а IE использует свою собственную систему. Каждый из них немного отличается, и вы должны учитывать это в своем css.

Я попытался бы придерживаться обычного css и использовать специальный CSS-браузер, пытаясь выполнить более сложный стиль CSS3, например transition.

+0

Я использовал конкретный префикс броузера, если это то, что вы имеете в виду? Но я понимаю, что вы говорите. Может быть, мне нужно быть более конкретным с моим CSS в будущем. – Subvenio

+0

В будущем вы должны включить в свой вопрос соответствующие css и html, чтобы их можно было легко просмотреть. Я еще раз посмотрю на это. – Wold

+0

Просто попробовал скопировать/вставить все это в jsfiddle. Проблема была неточна. Но спасибо за помощь. – Subvenio

0

Я не уверен, что вы сделали это, потому что я не могу просмотреть ваш файл CSS, но хороший способ CSS CSS CSS в файле CSS - хорошая практика. Вы могли бы добиться этого путем сброса всех основных правил, как маржи, обивка, границ, размер шрифта, шрифт, вертикальное выравнивание и дисплея их значение по умолчанию, как , блок, наследуют, и 100%. Вы можете использовать звездочку * (звездочка), чтобы стилизовать все теги или перечислить их все отдельно, разделенные запятыми. Причина этого заключается в том, что по умолчанию каждый браузер имеет свои собственные стили, которые могут переопределять ваши собственные стили и вызывать нежелательные помехи на вашем сайте. Это хорошая практика.

+0

Спасибо за это, но я включил сброс css в свой html-файл, над моей собственной таблицей стилей. Поэтому все значения должны быть сброшены. – Subvenio

0

Попробуйте изменить значение позиции класса .target и посмотреть, какие изменения происходят. Также попробуйте добавить соответствующие значения полей. Что происходит, так это то, что ваш нижний колонтитул имеет более высокий индекс z, чем ваше тело, что заставляет его скрывать все переполнения.

+0

Я рассмотрю это, спасибо за помощь. – Subvenio