#css #html
#css #HTML
Вопрос:
У меня проблема с CSS. Мои DIVS располагаются по-разному в зависимости от того, когда я запускаю свое веб-приложение с веб-сервера по сравнению с моим локальным сервером разработки VS2010.
Все мои три внутренних раздела (preButtons, navContainer, postButtons) отображаются встроенно при локальном запуске, но когда я публикую и запускаю с веб-сервера IIS 7.5, после каждого раздела появляется разрыв строки.
Есть идеи, чего мне не хватает?
Вот HTML:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
width: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
Обновить:
Вот скриншот проблемы в действии. Синяя граница связана с тем, что у меня выбран div «пейджер» в IE developer tools. 
Обновить:
В конце дня моя проблема была двоякой.
Мои HTML и CSS необходимо было очистить, как было указано, но также мой сайт открывался в режиме совместимости. Это произошло потому, что параметр «Отображать сайты интрасети в режиме совместимости» был отмечен положительным в меню Инструменты -> Настройки режима совместимости. Я думаю, что он был установлен автоматически, когда моя компания развернула IE8 на наших рабочих столах.
Спасибо всем за помощь!
Комментарии:
1. является ли HTML / CSS точно таким же (do a DIFF)?
2. Такого рода вещей обычно не происходит. Он должен предоставлять вам кэшированную версию этой страницы.
3. Может быть, вам следует попробовать использовать файл .css вместо того, чтобы делать стиль встроенным? Также проверьте источник просматриваемой вами страницы с нежелательными изменениями, чтобы убедиться, что код точно такой же
4. Вы намеренно опустили теги html, head и body или их действительно там нет? Вероятно, скриншот поможет, чтобы мы точно знали, что вы пытаетесь сделать ….. ваш макет, вероятно, не самый эффективный способ сделать это.
5. В IE developer tools режим страницы одинаков для обеих страниц (ie. это рендеринг в режиме IE7, 8 или 9 в обоих случаях — не имеет значения, какой, если они оба одинаковые)?
Ответ №1:
Здесь вы можете значительно упростить свой код. Возьмите свои три div-файла и поместите их в контейнер. Переместите все три влево. После этого очистите значение float. Больше не требуется абсолютное позиционирование. Договорились.
Например: HTML:
<div class="container">
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="clear"></div>
</div>
CSS:
.floatleft {
float: left;
}
.clear {
clear:both;
}
Кроме того, в зависимости от того, что вы просматриваете, может быть намного проще создать сетку javascript, такую как DataTables, что вообще избавило бы от необходимости делать что-либо из этого….
Комментарии:
1. Похоже, это решает проблему! Спасибо! Вопрос: Я выполнял только абсолютное позиционирование в моем #reel div (потому что он шире navContainer и прокручивается по кругу). Вы знаете, почему он отображался по-разному в разных настройках?
2. Круто, спасибо за ссылку! Я создавал свой собственный, так как не знал ничего лучшего.
3. Я не могу представить себе размещение определенных страниц без этой техники. 1
Ответ №2:
Используйте сброс css, такой как этот, в начале вашего css.
Комментарии:
1. К сожалению, это частичный элемент управления просмотром, встроенный как часть других страниц моего приложения. Удаление CSS разрушает остальную часть моей страницы. Однако это вызвало завихрение, и после этого у divs все еще был разрыв строки.