В настоящее время я закодировал весь внешний интерфейс, чтобы он работал на 100% корректно в Chrome. Сейчас я прохожу кросс-браузерное тестирование и исправляю ошибки. Я наткнулся на странную ошибку в Safari, где изображения не отображаются правильно. Взгляните на HTML:
<li class="newsfeedlist-item">
<div class="questionslogo"</div>
<div class="newsfeedlist-image">
<img src="http://images.ted.com/images/ted/2ade6b48aac1eb21b7b90fe43335a8e70771455c_50x50.jpg"></div>
<div class="newsfeedlist-content">
<h3><b><a href="#">What Is The Best Way To Become A Photographer? </a></b></h3>
<div class="newsfeedlist-bodytext"> What if a fish came across a river? Then what??? What if a fish came across a river? Then what??? What if a fish came across a river? Then what??? What if a fish came across a river? Then what??? What if a fish came across a river? Then what???</div>
<div class="newsfeedlist-questionauthor"> <i>Started By <a href="#">Robert Sopel</i></a></div>
</div>
</li>
вы заметите, что это куча простых div, которые все ссылаются на скрипты из CSS. Ошибка в Safari (на мой взгляд) происходит не от CSS, а от тега «img src» в html. Но вот CSS для "newsfeedlist-image" и "questionslogo", оба из которых имеют ошибки:
.questionslogo {
width: 84px;
background: url(images/questions.png) top left no-repeat;
padding: 8px 0px 0px 100px;
float: left;
}
.newsfeedlist-image {
width: 48px;
float: left;
}
обратите внимание, что я попытался зафиксировать высоту для обоих и display: block, но это не меняет того факта, что в Safari он не распознает изображение (вы не можете щелкнуть и перетащить его, оно просто наводится на это) Смотрите скриншоты ниже.
Chrome:
http://www.cl.ly/3f1Z143b3X0V1N1i1b1c
Firefox:
http://www.cl.ly/471R002N3v182q2W1V1j
и, наконец, Safari:
http://www.cl.ly/1X3H2W1A1V3b0G3V2n0G
Я думаю, что это простое исправление, но сейчас я не могу его найти. Буду признателен за любую помощь. Спасибо !!!