Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   ie8 ie9 display:none troubles (https://javascript.ru/forum/css-html-internet-explorer/20551-ie8-ie9-display-none-troubles.html)

aleha 09.08.2011 13:14
ie8 ie9 display:none troubles
 
Имеется порядка 90 изображений расположенных inline, т.е. одна за другой, чтобы по достижении границы контейнера перескакивали на новую строку. Имеется механизм фильтрации, на jQuery и аналогичный на javaScript, который по определенным условиям проставляет некоторым картинкам dispaly:none а другим соответственно display:inline. В лисе всё отображается как и ожидается. В IE большая часть display:none прячется, но при этом остается несколько дырок, как будто был применен метод visibility:hidden.
В чем может быть загвоздка?

devote 09.08.2011 13:19
у картинок имеется margin, padding, border или размеры у картинок не идентичны... что бы переносилось на другую строку, нужно что бы высота у картинок была одинаковая.

aleha 09.08.2011 14:09
Цитата:
Сообщение от devote (Сообщение 119154)
у картинок имеется margin, padding, border или размеры у картинок не идентичны... что бы переносилось на другую строку, нужно что бы высота у картинок была одинаковая.
Картинки нормально переносятся на другую строку. Просто по середине ряда например образуется пустое место.
у картинок есть css класс, в котором им прописано, чтобы у всех была одинаковая высота.
при простановке 0 нулевых margin и padding ничего не меняется

ksa 09.08.2011 16:48
Цитата:
Сообщение от aleha
В чем может быть загвоздка?
Пример чёле какой сделай...

aleha 09.08.2011 17:13
Цитата:
Сообщение от ksa (Сообщение 119232)
Пример чёле какой сделай...
выдергиваю разметку из рабочей версии.
Так выглядит кусок где расположены картинки. Одна за другой. 
...
<td style="text-align:center;padding:0 20 0 20;" id="image_list">
    <img class="imgStyle "alt="costType3 cigType0" src="images/Prestige_KS/Competitors/DAVIDOFF_REGULAR_(2).png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt="costType3 cigType0" src="images/Prestige_KS/Competitors/KENT_REGULAR.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt= "costType3 cigType0" src="images/Prestige_KS/Competitors/KENT_SURROUND.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt="costType3 cigType0" src="images/Prestige_KS/Competitors/MARLBORO_PLUS.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt= "costType3 cigType0" src="images/Prestige_KS/Competitors/PARLIAMENT_REGULAR.png" onclick="nav('Prestige_KS')"/>
...


Так выглядит кусок логики фильтрации:
var imgListTD = document.getElementById("image_list");
        var images = imgListTD.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

             var altText = images[i].getAttribute('alt');
             if (globalCost != undefined & globalCigType == undefined) {
                  if (altText.indexOf(globalCost) != -1) {
                      images[i].style.display = 'inline';
                      totalVisible++;
                  }
                  else {
                      images[i].style.display = 'none';
                  }
             }
        }

Вот результат который получается в ИЕ


Вот как в лисе

devote 09.08.2011 18:27
хех, интересно получается)
может так попробовать:
var imgListTD = document.getElementById("image_list");
        var images = imgListTD.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

             var altText = images[i].getAttribute('alt');
             if (globalCost != undefined & globalCigType == undefined) {
                  if (altText.indexOf(globalCost) != -1) {
                      images[i].style.display = 'block';
                      images[i].style.float = 'left';
                      totalVisible++;
                  }
                  else {
                      images[i].style.display = 'none';
                  }
             }
        }


ну и в css у всех имагесов прописать:
.imgStyle {
....
display: block;
float: left;
....
}

aleha 09.08.2011 18:59
да так они все встали без разрывов, но при этом произошло выравнивание по левому краю, что не очень приятно. Теперь как их выровнять по центру?

ksa 10.08.2011 09:52
Цитата:
Сообщение от aleha
выдергиваю разметку из рабочей версии.
Пример нужно сделать такой, чтобы мы могли его запустить у себя. Огрызки мало что дадут...

aleha 10.08.2011 11:57
не проблема.
Вот пример. Открывать соответственно в IE. Взять какую-нибудь картинку, можно и без неё. Кликая на кнопочки фильтруется, но остаются дырки. Если делать display:block и float:left то образуется выравнивание по левому краю, что не годится к сожалению, так как нужно чтобы было по центру.


<html>
<head>
<style type="text/css">
.imgStyle
{
height:60px;

}
</style>

<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';

totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table style="width:500px;" border="1">
<tr>
<td id="image_list" style="text-align:center">
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />

</td>
</tr>
</table>
<input type="button" value="costType0" onClick="filter('costType0')"/>
<input type="button" value="costType1" onClick="filter('costType1')"/>
<input type="button" value="costType2" onClick="filter('costType2')"/>
<input type="button" value="costType3" onClick="filter('costType3')"/>

</body>

</html>

ksa 10.08.2011 13:26
aleha, это всё пробелы виноваты... :)
Вот вообще без дырок

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
.imgStyle {
	height:60px;
}
</style>

<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';

totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
 <table style="width:500px;" border="1">
 <tr>
 <td id="image_list" style="text-align:center">
 <img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
 </td>
 </tr>
 </table>
 <input type="button" value="costType0" onClick="filter('costType0')"/>
 <input type="button" value="costType1" onClick="filter('costType1')"/>
 <input type="button" value="costType2" onClick="filter('costType2')"/>
 <input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>


Часовой пояс GMT +3, время: 00:41.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице