Ошибка изменения размера изображения Safari? Бокс-модель Проблема? - PullRequest
Новая
       26

Ошибка изменения размера изображения Safari? Бокс-модель Проблема?

0 голосов
/ 24 октября 2011

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

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

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

1 Ответ

2 голосов
/ 24 октября 2011

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

Я бы выбрал 

.blueberry .pager div.thumbNail {
  position: relative


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

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

...