Css проблема с IE / FF совместимостью

Question

У меня есть некоторые CSS, которые не работают правильно с IE8. Он отлично работает с FF3, но в IE8 между элементами списка есть белые прямоугольники, и все это глючит.

вот css в вопросе

#golist {
    width:900px;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
}
#listing {
  list-style:none;
  margin:0;
  padding:0;
}
    #listing li {
        float:left;
        display:block;
        width:128px;
        background:#fff;
        border:1px solid #000000; 
        height:96px;
    }
    #listing li a {
        border:none;
    }
    #listing p {
        margin-bottom:0;
    }


    /* ---- show-hide elements ---- */

    #listing li .show{
        display:block;
        width:128px;
        height:96px;
    }
    #listing li .hide {
        color:#121212;
        text-align: left;
        height: 0;
        overflow: hidden;
        background-image:url(bghover.png);
    }
    #listing li:hover .hide, #listing li.over .hide {
        cursor: pointer;
        height: 96px;
        width:128px;
        text-align:center;
    }
    #listing li:hover .show, #listing li.over .show {
        height: 0;
        overflow: hidden;
    }

    #listing li a, #listing li a:visited, #listing li a:active {
        color:#121212;
        font-size:12px;
        text-decoration:none;
    }
    #listing li a:hover {
        color:#121212;
        text-decoration:none;

    }

А вот и сам код:

<div id=golist>
  <ul id=listing>
    <li class=show>
      <a href=#>
        <img src=images/image.jpg height=96px width=128px border=0>
      </a>
      <div class=hide>
        <a href=link.html>Link</a>
        <p>Some info</p>
      </div>
    </li>
  </ul>
</div>

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

Answer 1

Здесь вы можете узнать об этом: http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

Это часть статьи:

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

В одном проекте, который я построил, я создал макет из двух столбцов, для которого требовались поля и отступы. Это означало, что я столкнулся с различиями в блочной модели при просмотре страницы в IE 6. Моя первая таблица стилей CSS для Firefox содержала следующую строку:

div#nav { width: 150px; margin-left: 20px; }

Это сделало страницу идеально выровненной в Firefox и Safari, но в IE столбец nav был слишком сильно сдвинут вправо.

Итак, я преобразовал строку для использования дочерних селекторов. #Nav div является дочерним элементом тега body, поэтому я изменил строку следующим образом:

body > div#nav { width: 150px; margin-left: 20px; }

Конечно, из-за этого #nav div потерял все свои свойства в IE, поэтому мне нужно было добавить несколько стилей IE, чтобы IE 6 выглядел нормально. Я добавил эту строку в CSS:

#nav { width: 150px; margin-left: 10px; }

Размещение этой строки CSS важно, если моя страница все еще хорошо выглядит в Firefox и Safari. Линия IE должна идти первой. Firefox и Safari прочитают эту строку, а затем она будет перезаписана селектором body> div # nav в документе. IE 6 прочитает первую строку и установит стили. Затем он игнорирует дочерний селектор, так как не распознает их. Когда появится IE 7, он будет действовать как Firefox и Safari.

Спроектировав сначала совместимый со стандартами браузер, а затем изменив свой CSS для поддержки особенностей IE, вы тратите гораздо меньше времени на настройку дизайна и гораздо больше времени на фактическое проектирование.

Answer 2

Начните с очистки всех отступов и полей по умолчанию в вашем CSS-файле, используя:

* { padding: 0; margin: 0 }

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

Когда вы доведете его до уровня, когда вы довольны им в Firefox и Safari, используйте условные операторы, чтобы получить соответствующую таблицу стилей IE:

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

В ваших таблицах стилей переопределяются только те, которые необходимо переопределить:

Мастер CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

(По любой причине IE 8 может потребоваться переопределение ширины.)