Задать вопрос

Как убрать «странное» расстояние между картинками в IE 9 и ниже версии?

Изображения только в IE старых версий стоят неплотно друг другу. По цвету отображает как margin, но они все по нулям, но почему-то отступ все-равно есть...

cc18550625bb4ed2a33c774f30508f10.JPG

п.с.: бордер нужен, не из-за него.

Полный код
<html>
	<head>			
	    <style>
		#masonry{
			background-color: #999;

		}
		* {
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
			  box-sizing: border-box;
		}
		.small img{
				border: 2px solid #999;
				float: left;
				width: 150px;
				height: 150px;
		}
		.small a:hover img{
			border:2px solid #f00;
		}
		.small.hor img{
				width:  150px;
				height: 100px;
			}
		.small.ver img{
				width:  100px;
				height: 150px;
			}
		.small.square img{
				width:  50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
				<div id="news"><div id='masonry'>   
					<?php
						$query = "SELECT * FROM images WHERE type='main' AND location='studio';";
						$result = $db->query($query);
						while ($postrow[] = $db->fetch($result));
						for ($i = 0; $i < count($postrow) - 1; $i++) {
							if ( $postrow[$i]['size'] == "small") {
								echo '<div class="small"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
							}
							if ( $postrow[$i]['size'] == "hor") {
								echo '<div class="small hor"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
							}
							if ( $postrow[$i]['size'] == "ver") {
								echo '<div class="small ver"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
							}
							if ( $postrow[$i]['size'] == "square") {
								echo '<div class="small square"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
							}
						 }
					?>	        
	</body>
	 <script src='js/masonry.pkgd.min.js'></script>
    <script>
    var container = document.querySelector('#masonry');
    var msnry = new Masonry( container, {
      columnWidth: 50,
      smallSelector: '.small'
    });
    </script>   
</html>
  • Вопрос задан
  • 3849 просмотров
Подписаться 3 Оценить 6 комментариев
Пригласить эксперта
Ответы на вопрос 3
zenwalker
@zenwalker
0xABADBABE
Показывать нужно в первую очередь код, а не картинки.

Держу пари, что элементы у вас строчные и между ними в коде есть пробелы или переносы строк. Избавляйтесь от них, либо используйте блоки с float:left, либо родительскому элементу укажите word-spacing: -1.
Ответ написан
Комментировать
@belka1906 Автор вопроса
Код без переносов и пробелов

<div class="small hor"><a href="projectsshow.php?id=1"><img src="img/1398964956_033.jpg" title="tgtrtfgth"></a></div><div class="small ver"><a href="projectsshow.php?id=23"><img src="img/1398965151_069.JPG" title="gbgfgf"></a></div><div class="small hor"><a href="projectsshow.php?id=22"><img src="img/1398965161_046.jpg" title=""></a></div><div class="small square"><a href="projectsshow.php?id=21"><img src="img/1398965178_033.jpg" title=""></a></div><div class="small"><a href="projectsshow.php?id=20"><img src="img/1398965186_036.jpg" title=""></a></div><div class="small ver"><a href="projectsshow.php?id=19"><img src="img/1398965193_051.jpg" title=""></a></div>


float: left eсть
word-spacing: -1 ничего не меняет...
Ответ написан
Комментировать
Zoxon
@Zoxon
Веб-разработчик
По коду выше особо не понятно в чем проблемма. Вот несколько замечаний которые бросаются в глаза
Дефолтные стили браузеров нужно сбрасывать, хотябы так
*{
   margin: 0;
   padding: 0;
}


float нужно сбрасывать, например так
.clear{clear: both;}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
06 дек. 2024, в 05:29
20000 руб./за проект
06 дек. 2024, в 03:58
10000 руб./за проект
06 дек. 2024, в 02:20
5000 руб./за проект