CSS отличается по-разному на веб-сервере, чем на среде разработки

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

Я использую тот же браузер и тот же компьютер для просмотра страниц. Единственное отличие - это "сервер". Я использую .net 3.5 и в моей среде разработки страницы обслуживаются с использованием ASP.net Development Server. На веб-сервере страницы подаются с использованием IIS 6.0.

У меня есть только один файл CSS, который содержится в папке "App_Themes/Default", которая используется для управления всем CSS в моем приложении.

Вот некоторые из вещей, которые не отображаются одинаково:

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

2) У меня есть элемент, определенный с фоном и определенным размером шрифта. При отображении в моей среде разработки текст отображается в одной строке. Однако на веб-сервере текст обертывается, даже если текст имеет тот же размер. Это как если бы содержательный div каким-то образом оказывался "меньшим".

3) Ширина кнопок, которые не имеют фиксированной ширины (поэтому ширина определяется текстом кнопки) отличается между средой разработки и веб-сервером. Буферы на сервере всегда шире.

Я проверил, чтобы не было ссылок на другие элементы CSS в файле machine.config и глобальном web.config на сервере и в моей среде разработки.

Я знаю, что сервер читает из CSS, потому что в целом он похож (такие же цвета, фон, стиль шрифта и т.д.). Это просто, что размеры, кажется, выключены и слоирование divs.

Кто-нибудь сталкивался с этой проблемой раньше? Любые идеи того, что я мог бы искать?

Ответы

Ответ 1

Похоже, вы сравниваете их в Internet Explorer 8. Microsoft представила различные режимы рендеринга для локальных и интернет-серверов, чтобы веб-разработчики срывались в слезах.

Если нет значения X-UA-Compatible и сайта в Зона безопасности локальной интрасети, она будет отображаться в режиме EmulateIE7 по умолчанию.

Добавьте заголовок X-UA-Compatible или META, чтобы принудительно установить режим стандартных стандартов IE8.

См. также http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/

Ответ 2

У нас тоже была проблема с режимами совместимости, поэтому я просто добавил:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Поскольку я знал, что он отлично работает в IE7, 8 и 9.

Ответ 3

Это, по крайней мере, звучит так, что производственный сервер добавил объявление HTML в HTML или изменил doctype, из-за чего страница была отображаемый в нестандартном режиме. Это также известно как режим quirks, вы видите это очень хорошо в MSIE. Симптомы, которые вы описали, можно распознать как ошибка модели коробки в MSIE.

Вправо щелкните страницы и проверьте источник HTML. Являются ли они оба точно одинаковыми? (включая метатеги, объявление xml, пробелы и т.д.)

Если вы работаете FTP из Windows в Linux, убедитесь, что вы переносите в двоичном режиме, чтобы гарантировать, что пробелы (пробелы, строки) остаются неизменными. Также убедитесь, что вы сохраняете документы как UTF-8 (или, по крайней мере, ISO-8859-1), а НЕ как MS-проприетарное кодирование, такое как CP1252.

Ответ 4

Для тех из вас, у кого эта проблема возникает на сайте Intranet, метатег не будет устранять проблему, если флажок "Показывать сайты интрасети в представлении совместимости" (что во многих случаях)

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

Ответ 5

У меня была такая же проблема в Google Chrome. По-видимому, медиа-запросы перепутались, если страница была увеличена или уменьшена. Убедитесь, что уровень масштабирования составляет 100% для обоих сайтов.

Ответ 6

Для меня Internet Explorer Compatibility View Settings был проблемой:

доступ к настройкам просмотра совместимости

Настройки просмотра совместимости

После того, как флажки были не установлены, CSS отлично отображает

Ответ 7

Просто добавьте это в свой файл web.config:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=8" />
        </customHeaders>
  </httpProtocol>
</system.webServer>

Ответ 8

У нас была та же проблема, исправленная на IE9 и IE11:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>

Ответ 9

CSS, который поступает с сервера, может быть более старой кешированной версией - попробуйте обновить страницу с помощью Ctrl + F5, чтобы получить запрос.

Ответ 10

У меня была такая же проблема. Наша сеть использует Win7 с IE11 повсюду. Для меня решение состояло в том, чтобы на моей локальной машине добавление "localhost" в список в настройках совместимости IE > "Веб-сайты, добавленные в представление совместимости". IE > Инструменты > Параметры просмотра совместимости.

Кстати, у нашего NA есть все настройки машины IE11 для "Отображать сайты интрасети в представлении совместимости", которые автоматически проверяются групповой политикой.

Ответ 11

Это часто случается со мной, когда "серверная" версия кэшируется каким-то образом. Освежающий сделал трюк. Это также отбрасывает "временные интернет файлы".

Ответ 12

У меня была эта проблема. Я изменил таблицу стилей и HTML-код. Он отлично смотрелся локально, но не работал на сервере. Я обнаружил, что в Visual Studio для файла CSS "Копировать в выходной каталог" установлено значение "Не копировать". Поэтому мои обновления CSS не были развернуты. Иногда проблема - это просто ошибка пользователя.

Ответ 13

попробуйте это.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Ответ 14

Может быть вызвано минимизацией, например. на dev машине у вас есть

<span>AAA</span>
<span>BBB</span>

но на удаленном сервере он становится

<span>AAA</span><span>BBB</span>

и пробел между ними теряется.