Question

我正在创建一个使用Mark Tyrell的蓝莓插件的液体j-query滑块（所有的冰雹！），但是我在缩略图中遇到问题，而不是在IE 8中工作的Safari（移动或桌面）中重新调整尺寸，以及Firefox 7.01和Opera 9.5。

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

看到（几乎）工作页面

在Safari中，缩略图图像不会缩小以适应容器的高度（div称为缩略图），并且不限于溢出：隐藏在该容器中。他们在div的父级（一个标签）中遵守overflow：hidden命令。最大的问题是拒绝重新调整大小以适应父div标签的高度。

老实说，我不知道这是一个Safari bug，一个盒子模型问题，用户错误（很可能）或者是所有的组合。我将不胜感激，任何人都可以给予任何帮助。如果我可以

我的样式表是：

* {
    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

身高：100％无法正常工作

我会选择

.blueberry .pager div.thumbNail {
  position: relative


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

additionaly

Safari Image调整Bug大小？箱型模型问题？

1 个答案: