Ложка дегтя

gordi · June 25, 2011

При попытке сделать стандартный трех колоночный макет с колонкоми равной высоты

при помощи display:inline-block; и display:inline; для IE6(7),

появилась проблема в IE8 - не растягивается цветная подложка по высоте.

Пример представляет чисто спортивный интерес.

Edited June 25, 2011 by gordi

psywalker · June 25, 2011

При попытке сделать стандартный трех колоночный макет с колонкоми равной высоты
при помощи display:inline-block; и display:inline; для IE6(7),
появилась проблема в IE8 - не растягивается цветная подложка по высоте.
Пример представляет чисто спортивный интерес.

Лови дружище

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>display:inline-block (OPERA,FF,IE8) and display:inline (IE6,IE7)</title>
<style type="text/css">
* {margin:0;padding:0;}

#main { border:#000 1px solid;margin:10px auto;min-width:910px;max-width:980px;}
#middle {background:#ff9;border-right:#cc9 200px solid;border-left:#ddd 200px solid;}
.content,.left,.right {
	display:inline-block;position:relative;vertical-align:top;overflow:hidden;}
.content {margin-right:-100%;width:100%;}
.left {right:200px;margin-right:-200px;width:200px;}
.right {right:-100%;width:200px;}

*+html #middle {overflow:hidden;}
*+html .content,*+html .left,*+html .right {display:inline;}
*html #main {width:980px;}
*html .content,*html .left,*html .right {display:inline;}
*html .right {right:-580px;}

p {padding:7px;}
.expand a { color:#960;display:block;text-decoration:underline;}
.expand:hover  { color:green;height:500px;}
* html .expand a:hover  { color:green;height:500px;}
</style>
</head>
<body>
<div id="main">
  <div id="middle">
    <div class="content">
      <p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Content</p>

      <div style="border:#000 1px solid;margin:10px auto;width:500px;"><p>width:500px;</p></div>
    </div>
    <div class="left"><p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Left</p></div>
    <div class="right"><p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Right</p></div>
  </div>
</div>
</body>

</html>

gordi · June 25, 2011

Спасибо.

Если дело только в этом:


.expand:hover  { color:green;height:500px;} 
* html .expand a:hover  { color:green;height:500px;}

Хотя везде и всегда работало:


.expand a:hover  { color:green;height:500px;}

Тогда, вообще, не понятно что с IE8

psywalker · June 25, 2011

Спасибо.
Если дело только в этом:
.expand:hover  { color:green;height:500px;} 
* html .expand a:hover  { color:green;height:500px;} 
Хотя везде и всегда работало:
.expand a:hover  { color:green;height:500px;} 
Тогда, вообще, не понятно что с IE8

Да что тут непонятного? Линейка ИЕ вообще бажная наглухо, вот тебе и пример прокола ИЕ8, чуть сложнее задание и ппц, прокололся

gordi · June 25, 2011

Да что тут непонятного? Линейка ИЕ вообще бажная наглухо, вот тебе и пример прокола ИЕ8, чуть сложнее задание и ппц, прокололся

Ну, скажем не самое соложное мой пример, были и посложнее, и там все было тип-топ с .expand a:hover {color:green;height:500px;}

Edited June 25, 2011 by gordi

psywalker · June 25, 2011

Да что тут непонятного? Линейка ИЕ вообще бажная наглухо, вот тебе и пример прокола ИЕ8, чуть сложнее задание и ппц, прокололся
Ну, скажем не самое соложное мой пример, были и посложнее, и там все было тип-топ с .expand a:hover {color:green;height:500px;}

Значит нужно уже смотреть на сочетания свойств и окружающей среды. Т.е. ИЕ может плохо отрабатывать например одно в сочетании с другим, и наоборот.

Sign In

Ложка дегтя

Question

gordi

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

gordi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

gordi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information