display:inline-block и IE

shedy · October 22, 2009

В общем хочу сделать что-то типо табличного вывода, есть куча div'ов в которых расположены нужные элементы, к каждому свойство display:inline-block и получилось всё замечательно(таблица по ширине странице, так как нужно), но это было в опере в IE открыл и ничего не вышло, помогите как можно справится с этой проблемой?

Опера 10-ая, интернет эксплорер - 6

заранее спасибо :angry:

psywalker · October 22, 2009

покажи скрин того, что хочешь получить

Justnewone · October 22, 2009

В общем хочу сделать что-то типо табличного вывода, есть куча div'ов в которых расположены нужные элементы, к каждому свойство display:inline-block и получилось всё замечательно(таблица по ширине странице, так как нужно), но это было в опере в IE открыл и ничего не вышло, помогите как можно справится с этой проблемой?
<div style="width: 303px; display: inline-block; text-align: center; ">
Опера 10-ая, интернет эксплорер - 6
заранее спасибо

Для IE6 и 7 этот блок должен иметь display: inline и zoom:1.

theo_ · October 22, 2009

inline-block вроде даже ie7 не воспринимает, поэтому лучше делать блоками с float

ну и особо извращаться не надо, таблицу проще таблицей сделать, а не всякими приемами типа display: table-item

Great Rash · October 22, 2009

Таблицы обычно таблицами делают...

shedy · October 22, 2009

display: inline и zoom:1.

для IE получилось, но теперь в опере не работает =)

psywalker · October 22, 2009

для IE получилось, но теперь в опере не работает =)

Ты мне скрин покажешь или нет?

shedy · October 22, 2009

покажи скрин того, что хочешь получить

так же как гугл картинки показывает тут

Таблицы обычно таблицами делают...

Но таблицы не сделаешь чтоб было количество колонок например 10, а если раздвинешь окошко, то 13... надо чтобы удобно было просматривать для каждого экрана(а не только на половину экрана)

Justnewone · October 22, 2009

для IE получилось, но теперь в опере не работает =)

надо опере давать старое, а IE - новое, можно реализовать через conditional comments или через персональные CSS-хаки, поинтересуйтесь у гугла, или тут в форуме поищите, очень много тем.

psywalker · October 22, 2009

А нука попробуйка изменить и сделать под себя :angry:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		ul { list-style: none; text-align: center;}

			ul li {
				display: inline-block;
				width: 200px;
				height: 300px;
				text-align: left;
				border: 1px solid #000;
				margin: 0 10px;
			}
				ul li a { display: block; color: red; padding: 4px 3px;}

</style>

<!--[if lte IE 7]>
<style type="text/css">
	ul li {
		display: inline;
	}
</style>
<![endif]-->
</head>

<body>
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</body>
</html>

Edited October 22, 2009 by psywalker

shedy · October 22, 2009

А нука попробуйка изменить и сделать под себя

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		ul { list-style: none; text-align: center;}

			ul li {
				display: inline-block;
				width: 200px;
				height: 300px;
				text-align: left;
				border: 1px solid #000;
				margin: 0 10px;
			}
				ul li a { display: block; color: red; padding: 4px 3px;}

</style>

<!--[if lte IE 7]>
<style type="text/css">
	ul li {
		display: inline;
	}
</style>
<![endif]-->
</head>

<body>
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</body>
</html>

Большое спасибо, попробую через полчаса, ща ухожу :angry:

psywalker · October 22, 2009

Большое спасибо, попробую через полчаса, ща ухожу

Молодец, попробуй

shedy · October 22, 2009

Всё таки попобовал... всё получилось! не знал, что можно такие условия делать... спасибо =)) а как в отдельном файле так прописать?

psywalker · October 22, 2009

Всё таки попобовал... всё получилось! не знал, что можно такие условия делать... спасибо =)) а как в отдельном файле так прописать?

Ребята наши говорят что придётся тебе файл стилей сделать для ИЕ специальный, а подключить его так же, как и обычный, между элементом <head></head>

Sign In

display:inline-block и IE

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information