Блог

Я создаю жидкий слайдер j-query с помощью плагина blueberry от Марка Тирелла (приветствую!), Но у меня проблема с тем, что уменьшенные изображения не изменяют размер в Safari (мобильном или настольном), которые работают в IE 8, Firefox 7.01 и Opera 9.5.

Вы можете увидеть (почти) рабочую страницу по адресу http://development.carrollorganization.com/blueberry3.php

В Safari уменьшенные изображения не сжимаются, чтобы соответствовать высоте контейнера (div называется thumbnail), и они не ограничены переполнением: скрыты в этом контейнере. Они подчиняются команде overflow:hidden в родительском элементе div (тег a). Большой проблемой является отказ изменить размер, чтобы соответствовать высоте родительского тега 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>
  

высота: 100% работает не так, как вы могли бы ожидать

Я бы выбрал

 .blueberry .pager div.thumbNail {
  position: relative


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

дополнительно