2014-02-20 29 views
3

我在使用Chrome,Mozilla或Safari时将漂亮的照片窗口垂直对齐屏幕中心有问题。 IE浏览器很好。如果你能帮助我为什么会发生这种情况,以及我如何解决这个问题,我会很高兴。将漂亮的照片窗口垂直对齐屏幕中心问题

我检查了麻烦的原因是计算加载prettyPhoto窗口的最高值。

源代码的相关线在浏览器,Mozilla,Safari浏览器:

<div class="pp_pic_holder light_rounded" style="top: 1236.5px; left: 542.5px; display: block; width: 180px;"> 
源代码的

相关线路在IE:

<div class="pp_pic_holder light_rounded" style="left: 542px; top: 199.5px; width: 180px; display: block;"> 

我还添加了源代码的部分下面,可以帮助你解决问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr"> 
<head> 
<link rel="stylesheet" href="../css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
<link href="../css/tema.css" rel="stylesheet" type="text/css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="../js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
<div id="urundetayresim"><ul class="gallery"> 
<li> 
<a href="images/urunler/bu353_1s4.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_1s4.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="240" /></a> 
</li><li> 
<a href="images/urunler/bu353_2.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_2.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="195" /></a> 
</li><li> 
<a href="images/urunler/bu353_3.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_3.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="234,146341463" /></a> 
</li></ul></div> 

<script type="text/javascript" charset="utf-8"> 
jQuery(document).ready(function() { 
    jQuery('#urundetaydetaybilgi2').hide(); 
    //jQuery(".fancybox").fancybox(); 
    jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ 
    allow_resize: true, /* Resize the photos bigger than viewport. true/false */ 
    default_width: 500, 
    default_height: 344, 
    theme: 'light_rounded', 
    deeplinking: false 
    }); 
}); 
</script> 
</body> 
</html> 

回答

7

你是否确实需要doctype过渡?

尝试使用4.01严格:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

或使用HTML 5使用简单:

<!DOCTYPE html> 

我认为这可能不需要编辑CSS或JavaScript解决您的问题。

+0

我不能为原始海报说话,但修复doctype肯定为我解决了问题,谢谢法比奥。 – hawbsl

+0

这解决了这个问题。谢谢。 –