div "top" ошибка IE и все остальное.Большая проблема

Question

Я новичок в CSS, поэтому, пожалуйста, помогите мне в этой проблеме.Я надеюсь описать это правильно.

Я делаю div именованный контент, где находится контент моего сайта.Я сделал это с z-index: -1;так что изображение будет над этим делом.Но в Chrome, FF и safari контент стал неактивным.Я не могу выделить текст, нажать на ссылку и написать в формах.Поэтому я попытался с положительными состояниями в z-index, но IE не знает, что это значит.Черт.Поэтому я решил сделать условный div.Вот код:

.content
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top:50px;
}
.content_IE
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top: 50px;
    z-index:-1;
}

, а вот HTML:

<!--[if IE 7]>
    <div class="content_IE" style="height:750px;">
        <![endif]-->
            <div class="content" style="height:550px;">

Все хорошо с z-index, но проблема в том, что если в .content нет вершиныВ IE все выглядит отлично, но в других браузерах нет места.Если я верну вершину: 50px;есть еще 50px, как padding в классе .content_IE.Я имею в виду, что страница выглядит так, будто я поставил top: 50px;и padding-top = 50px ;.Я пробовал все как на полях: -50px;обивка-топ: -50px;и тому подобное, но я все еще в кругу.Выглядит хорошо, только если в классе .content нет опции top .Пожалуйста, помогите.

Answer 1

Проблема в том, что эти два div не являются взаимоисключающими - IE видит оба ваших .content и .content_IE div, а расположение, которое вы пытаетесь установить, определяется внутренним .content div (потому что оба имеют к ним position: relative). Попробуйте удалить .content div из своего кода и посмотрите на него в IE, вы, скорее всего, увидите те же проблемы, что и в других браузерах. (Для получения дополнительной информации, эта статья довольно хорошо описывает позиционирование)

(это, возможно, немного многословно, но предоставляет некоторые разумные стратегии для предотвращения подобных проблем в будущем):

Здесь происходит несколько вещей: специфичная для IE обработка и проблемы z-index.

Во-первых, несколько рекомендаций по стилю / стратегии:

1. Не используйте встроенные стили (высоту, которую вы устанавливаете для классов .content и .content_IE), это имеет еще меньше смысла, поскольку вы устанавливаете другие свойства стиля (например, ширину) с помощью CSS. Единственная причина, по которой я могу это сделать (и даже тогда я бы порекомендовал против этого), заключается в том, что вы что-то делаете с Javascript.

2. Для объявлений, специфичных для IE, лучшим подходом является настройка ваших стилей, чтобы вы могли позаботиться о каскаде - установка базовых стилей (высота, ширина и т. Д.) Для класса .content и затем примените несколько определенных правил IE (например, разной высоты). Это будет выглядеть примерно так:

   <style>
       .content {
           background: #fff;
           height: 550px;
           width: 990px;
           position: relative;
           float: left;
           top: 50px;
       }
   </style>
   <!--[if IE 7]>
   <style>
       .content {
           height: 750px;
       }
   </style>
   <![endif]-->
   

Таким образом, вы должны испытывать а) меньшую потенциальную странность и б) легче поддерживать свой код. Если ваши таблицы стилей достаточно велики, разбейте правила на два (например, «main.css» и «ie7.css» и укажите ссылку на IE внутри условного комментария.

Теперь, что касается проблемы z-index - я бы порекомендовал применить z-index к изображению, которое вы пытаетесь поместить «поверх» содержимого, и использовать положительное значение. Это должно предотвратить то, что, по моему мнению, происходит в IE (в общем, IE имеет проблемы с отрицательными значениями, поэтому старайтесь избегать их, если можете).

Если это решит проблему, продолжайте работать с вашим кодом, чтобы вам тоже не понадобился условный CSS.

Answer 2

Есть несколько ошибок с IE z-index, но то, что вы описываете, не похоже на одну из них, вы должны делать что-то странное. Можете ли вы показать пример? Я спрашиваю, потому что я бы старался избегать использования таких условных выражений, если смогу.

Но вот ваш короткий и сладкий ответ:

.content
{
  background:#FFF;
  width:990px;
  position:relative;
  float:left;
  top:50px;
  *top: 0px;
}

По сути, мы условно устанавливаем верх .content равным 0px для IE.