我正在使用未排序的列表来显示带有 a 标签的图像，以在每个图像上实现灯箱以查看图像的更大版本。 在 Mozilla Firefox、Google chrome 和 Opera 上，图像以正确的大小显示，但在 Internet Explorer 中它们较小。
W3C 验证器报告 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">
© 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/
最佳答案
在宽度和高度大小中使用像素而不是 % ...
关于html - IE 中的图像大小不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13332497/