CSS подходит для контента при изменении DOM - PullRequest
1 голос
/ 15 марта 2012

РЕДАКТИРОВАТЬ: Извините, ребята, это было решено Комментарий к проверке встроенного стиля устранил проблему. Проблема была не в CSS, а в JavaScript. Иногда, когда вы кодируете слишком долго, вы пропускаете эти вещи. Еще спасибо за помощь

У меня ошибка с моим css. Когда я отключаю кеширование в Firefox, ширина контейнера с позиционированием aboslute не растягивается, чтобы соответствовать дочернему элементу div. Когда я перезагружаю страницу (изображение было кешировано в браузере), оно отображается правильно. Центрирование выполняется с помощью javascript (отлично работает, но не центрируется, когда изображение кэшируется, потому что ширина родительского элемента (lbCenter) = 0).

<div id="lbOverlay" style="background: url("blue.png") repeat scroll 0% 0% transparent; opacity: 0.25;"></div>
<div id="lbCenter" style="display: block; padding: 0px; left: 675px; top: 305px; width: 0px; height: 0px; margin-left: 0px;">
<div class="lbcb"></div>
<div id="lbWrap">
<img src="http://www.emohaircuts.org/wp-content/uploads/2010/08/emo-boy-fashion.jpg">
</div>
</div>

CSS:

#lbOverlay {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;    
    height: 100%;
}
#lbCenter {
    overflow:visible;
    display:block;
    text-align:center;
    position: absolute;
/*  padding: 20px;*/
    z-index: 110111111;
    outline: none;
}
/**------*/
#lbCenter{
color:green;
border: 10px solid #CCCCCC;
}

Как добиться того, чтобы при изменении содержимого lbWrap ширина родительского элемента автоматически обновлялась? Например, когда изображение полностью загружено /

Ответы [ 2 ]

0 голосов
/ 15 марта 2012

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

<img src="http://www.emohaircuts.org/wp-content/uploads/2010/08/emo-boy-fashion.jpg" height="351" width="263" alt="Emo boy">
0 голосов
/ 15 марта 2012

Может быть, с использованием jQuery ... Изображение полностью загружено в событие готовности документа.Так что прикрепление правильной функции для обновления родителей к этому событию должно сделать это.Теперь родительское обновление (повторное рендеринг) - сложная часть, но я думаю, что добавление случайного класса и его удаление должны сделать это ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...