Safari图像大小调整Bug?盒模型问题

Question

我正在使用Mark Tyrell的蓝莓插件创建一个液体j-query滑块(所有的冰雹!)，但是我有一个缩略图图像不能在Safari(移动或桌面)中重新调整大小的问题，在IE 8, Firefox 7.01和Opera 9.5中工作。

您可以在http://development.carrollorganization.com/blueberry3.php

看到(几乎)工作的页面。

在Safari中，缩略图图像不会缩小到适合容器的高度(div称为thumbnail)，也不限于溢出:隐藏在该容器中。它们服从div父元素(一个a标记)中的overflow:hidden命令。最大的问题是拒绝重新调整大小以适应父div标签的高度。

老实说，我不知道这是Safari浏览器的错误，盒子模型的问题，用户错误(可能是)或所有的一些组合。我将感激任何人能给予的任何帮助。如果我可以

我的样式表是:

* {
    margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }
#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc { 
margin:0px;
padding:0px;
width:100%; 
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}
.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block;  /*position: relative; */}
.blueberry .crop li img { width: auto; }
.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li { 
overflow:hidden;
display: block; 
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active  {
background-color: #F00; 
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000; 
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important; 
margin:5%; 
border:1px solid #fff; 
}
.blueberry .pager div.thumbNail img  { 
display:block;
float:left; 
height:100%;
width:auto;
}

我的页面代码是(这是一个php页面，不是html):

    <div id="doc">
    <div id="content">
    <!-- blueberry -->
    <div class="blueberry">
    <ul class="slides">
    <li><img src="images/slider_images/slider_01.jpg"/></li>
    <li><img src="images/slider_images/slider_02.jpg"/></li>
    <li><img src="images/slider_images/slider_03.jpg"/></li>
    <li><img src="images/slider_images/slider_04.jpg"/></li>
    </ul>
     <ul class="pager">
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></a></li>
  </ul>
</div>

Answer 1

height: 100%不正常

我会选择

.blueberry .pager div.thumbNail {
  position: relative

.blueberry .pager div.thumbNail img {
  position: absolute;
  top: 0px;
  bottom: 0px;
}

另外