Проблема с 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

Start, очистив все дополнения и поля по умолчанию в файле 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 может потребоваться переопределение ширины.)

Answer 2

Здесь вы можете нашли об этом: 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 ДИВ является потомком тела тега, так что я изменил строку следующего содержания:

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

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

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

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

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