Question

我使用未排序的列表来显示带有a标签的图像，以在每个图像上实现灯箱，以查看更大版本的图像。在Mozilla Firefox，Google Chrome和Opera上，图像显示的大小正确，但在Internet Explorer中它们更小。

W3C Validator报告0错误，我宣布了Doctype。

以下是网页的源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Makeup Artist - Hair Stylist | Natalie Bennet</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mouseoverscroll.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js" ></script>
<div id="border"></div>
<div id="hide"></div>
<div id="header" align="center">
<div id="logo" align="center">
<img src="images/makeup-artist-hair-stylist.jpg" alt="Natalie Bennett" />
</div>
</div>
<div class="footer-arrow previous" style="left:1%; position:fixed;">
<img src="images/left-arrow-out.png"
onmouseover="this.src='images/arrow-left-on.png'"
onmouseout="this.src='images/left-arrow-out.png'" alt="previous" /></div>
<div class="galleryWrapper">
<ul class="galleryItems" style="list-style-type:none;">
<li><a href="images/portfolio/big/Sofia_1.jpg"><img class="portfolio" src="images/portfolio/Sofia_1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_2.jpg"><img class="portfolio" src="images/portfolio/Sofia_2.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_3.jpg"><img class="portfolio" src="images/portfolio/Sofia_3.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4a.jpg"><img class="portfolio" src="images/portfolio/Sofia_4a.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4b.jpg"><img class="portfolio" src="images/portfolio/Sofia_4b.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4.jpg"><img class="portfolio" src="images/portfolio/Sofia_4.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_5.jpg"><img class="portfolio" src="images/portfolio/Sofia_5.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_1.jpg"><img class="portfolio" src="images/portfolio/Andro_1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_2.jpg"><img class="portfolio" src="images/portfolio/Andro_2.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_3.jpg"><img class="portfolio" src="images/portfolio/Andro_3.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_4.jpg"><img class="portfolio" src="images/portfolio/Andro_4.jpg" alt="" /></a></li>
[...]
<li><a href="images/portfolio/big/T1.jpg"><img class="portfolio" src="images/portfolio/T1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/T2.jpg"><img class="portfolio" src="images/portfolio/T2.jpg" alt="" /></a></li>
</ul>
</div>
<div class="footer-arrow next" style="left:96.5%; position:fixed;">
<img src="images/right-arrow-out.png"
onmouseover="this.src='images/arrow-right-on.png'"
onmouseout="this.src='images/right-arrow-out.png'" alt="next" /></div>
<div id="footer">
<div id="site-navigation" align="center">
<ul>
<li><a href="javascript:void(0)" class="active">Portfolio</a></li>
<li><a href="javascript:closeThenNavigate('about.php')">About</a></li>
<li><a href="javascript:closeThenNavigate('backstage.php')">Backstage</a></li>
<li><a href="javascript:closeThenNavigate('contact.php')">Contact</a></li>
</ul>
</div>
<div id="footer-menu">
</div>
<div id="copyright">
&copy; Natalie Bennett 2012
</div>
</div> 
<script type="text/javascript">
    $('.galleryItems a').lightBox({fixedNavigation:true});
openFooter();
var menuopen = false;
function openFooter(){
$('#footer').animate({
height: 40,
bottom:0
}, 750, 'linear');

}

function closeFooter(){
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear');

$('#footer-button').css("backgroundPosition","center 0px");
}

var currentImage = 0;

function closeThenNavigate(url)
{
 $('#footer').animate({
 height: 20,
bottom:0
}, 750, 'linear', function() {
  window.location.href=url+"?i="+currentImage;
});
}
</script>
</body> 
</html>

这是图像的CSS：

img {
    border:none;
}
ul{
    padding:0px;
}
.galleryWrapper{
    top:6%; 
    left:0px; 
    width:100%;
    height:100%; 
    display:inline-block;
    position: fixed;
    width:100%;
    overflow:hidden;

}
.galleryItems li {
    list-style-type: none;
    float:left;
}

.portfolio{   
    widht:80%;
    height:88%;
    margin: 6px;
    cursor:pointer;
    margin-bottom:250px;;
}

你知道为什么他们在IE中更小吗？

修改，忘记了链接：http://www.zackdibe.com/final/

Answer 1

使用像素而不是％的宽度和高度......

Answer 2

确实使用像素代替％或使用它。 IE7 / 8对地址栏使用了更大的区域（例如Chrome或FF更大），因此可视区域更小，从中计算百分比。

Answer 3

为position:relative;元素提供.portfolio值，然后尝试。

IE中的图像大小不正确

3 个答案: