Ответ 1
Я понял это, css установив позицию: относительная по изображению, примерно ie8 не нравится, есть ли какое-то обходное решение, поиск начинается.
Может ли кто-нибудь сказать мне, почему .jpg не исчезнет или не исчезнет в IE8. Сейчас это просто исчезает и появляется снова без изменений прозрачности. У меня это настроено локально и на сервере публикации, странно, что изображения исчезают и исчезают просто прекрасно локально, это только когда я иду на сервер публикации, который они перестают исчезать.
Просто интересно, не хватает ли я чего-то, что кто-то может быстро помочь мне с головы.
Вот gcRotateContent, который находится на сервере публикации. Если я просто бросаю изображение и выхожу из него, он по какой-то причине не работает с этой разметкой.
<div class="gcRotateContent">
<div id="USCFRR2EN" class="gcEmployeeProfile">
<div class="gcEmployeeProfileHeading">
Meet John</div>
<div class="gcEmployeeProfileContent">
<div class="gcEmployeeProfileHRPad">
</div>
<div class="gcEmployeeProfileHR">
</div>
<div class="gcEmployeeProfileHRPad">
</div>
<div class="gcEmployeeProfileSLVideo">
<img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John."
height="96" width="190"></div>
<div class="gcEmployeeProfileName">
</div>
<div class="gcEmployeeProfileTitle">
Software Development Lead, Server Performance</div>
<div class="gcEmployeeProfileQuote">
"You will find no other company with the sheer breadth of technologies. The things you get to see and learn from other
people are amazing."</div>
</div>
<div class="gcEmployeeProfileFooter">
</div>
</div>
</div>
<div class="gcRotate">
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px;">
This is first content
<img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
alt="First" />
</div>
</div>
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px">
This is second content
<img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
alt="Second" />
</div>
</div>
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px">
This is third content
<img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" />
</div>
</div>
</div>
<div>
This shouldn't move.
</div>
<script type="text/javascript">
function fadeContent() {
$(".gcRotateContent").first().customFadeOut(500, function() {
$(".gcRotateContent:hidden:first").customFadeIn(500)
});
$(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
}
$(".gcRotate").height(0);
$(".gcRotateContent").each(
function() {
if ($(".gcRotate").height() < $(this).height()) {
$(".gcRotate").height($(this).height());
}
}
);
$(".gcRotateContent").each(function() {
$(this).css("display", "none")
});
$(".gcRotate").hover(function() { window.clearInterval(timer) }, function() { timer = window.setInterval("fadeContent()", 2000) });
$(".gcRotateContent").first().show(0);
var timer = window.setInterval("fadeContent()", 2000);
(function($) {
$.fn.customFadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if (jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if (callback != undefined)
callback();
});
};
$.fn.customFadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if (jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if (callback != undefined)
callback();
});
};
})(jQuery);
</script>
Я понял это, css установив позицию: относительная по изображению, примерно ie8 не нравится, есть ли какое-то обходное решение, поиск начинается.
По-видимому, есть обходной путь!
Просто установите абсолютные/относительные позиционированные элементы следующими атрибутами css:
opacity:inherit;
filter:inherit;
например:
<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>
Удачи,
Омер
У меня была эта проблема, и все клещи css не работали. FadeIn/Out работал в FF и Chrome, но не в IE8, элемент вообще не появился. В IE7 они просто перешли от невидимого к видимому.
Итак, чтобы исправить мою проблему, я просто хотел сохранить fadeIn/Out в других браузерах и сделать элементы в IE8. Решением было использовать обратный вызов следующим образом:
$(".elements").fadeIn("slow",function(){$(this).show()}):
$(".elements").fadeOut("slow",function(){$(this).hide()}):
Таким образом, я всегда заставляю результат, который я хочу в конце.
Для быстрого и грязного исправления (или если приведенные выше предложения просто не работают, как и в моем случае), вы можете просто заменить jQuery fadeIn/fadeOut на show/hide. Итак, в html do:
<!--[if IE]>
<script type="text/javascript src="ieFixes.js"></script>
<![endif]-->
и в каком-то файле javascript IE-хаков (например, ieFixes.js) put:
jQuery.fn.fadeIn = function() {
this.show();
}
jQuery.fn.fadeOut = function() {
this.hide();
}
Вам придется немного подкорректировать это, если вы цепляете живые звонки и т.д.
Замените свое изображение на div (одного размера) фоновым изображением и fade-in/-out на div.
<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>