Условные комментарии IE не работают

Я использую условные комментарии IE (Internet Explorer), чтобы исправить проблемы с полями в IE, но по какой-то причине это не работает, и я не могу это исправить.

Код CSS (встроенный в условный комментарий):

<!--[if IE]>
   <style>
.right_header_form{
    float: right;
    margin: -360px 50px 0;
    width: 240px;
    height: auto;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    padding: 0px;
    background-color: #444;
    color: #FFF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 10px 15px;
}
.right_form {
    float: right;
    margin: -320px 50px 0;
    width: 240px;
    height: auto;
    background-color: #F5F5F5;
    color: #666;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
  </style>
<![endif]-->

Мой исходный код CSS для всех других браузеров:

.right_header_form{
    float: right;
    margin: -390px 50px 0;
    width: 240px;
    height: auto;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    padding: 0px;
    background-color: #444;
    color: #FFF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 10px 15px;
}
.right_form {
    float: right;
    margin: -350px 50px 0;
    width: 240px;
    height: auto;
    background-color: #F5F5F5;
    color: #666;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

Как видите, маржа отличается между каждым кодом и другим. Как я уже сказал, это не работает, но похоже, что код действителен.

Вопрос. Как изменить код CSS для IE, используя только условные комментарии?


css internet-explorer margin conditional-comments
person Yotam    schedule 01.03.2014    source источник
comment
@NiettheDarkAbsol Ну, я использовал маржу, так что это немного проблематично с браузером IE.   -  person Yotam    schedule 01.03.2014
comment
Какая версия ИЕ. IE11 не распознает условные комментарии.   -  person Paulie_D    schedule 01.03.2014
comment
Я думаю, что это вполне может быть из-за добавления отступов и ширины в один и тот же контейнер. IE использует другую блочную модель: 456bereastreet.com/archive/200612/   -  person JohanVdR    schedule 01.03.2014
comment
Я думаю, что проблема не в марже.. пожалуйста, сделайте скриншот и т. д., чтобы показать, в чем проблема..   -  person Hardy    schedule 01.03.2014
comment
Вероятно, Sigma права и это box-sizing проблема. Добавление типа документа заставит IE переключиться на модель содержимого.   -  person Oriol    schedule 01.03.2014
comment
@hardy img845.imageshack.us/img845/1673/b0be.png ‹ - Fire Fox img801.imageshack.us/img801/1323/6xhq.png ‹- ИЕ   -  person Yotam    schedule 01.03.2014
comment
@Oriol Проблема с местоположением, а не с размером.   -  person Yotam    schedule 01.03.2014
comment
@Paulie_D IE 10 и ниже   -  person Yotam    schedule 01.03.2014
comment
Ага... на самом деле IE10 тоже не поддерживает условные комментарии. Что-то еще должно быть не так, если вы видите разницу в браузерах   -  person Paulie_D    schedule 01.03.2014
comment
Проблема, кажется, в левой стороне.. не в правой.. добавьте левый код.   -  person Hardy    schedule 01.03.2014
comment
@Oriol jsfiddle.net/NxqLk/embedded/result   -  person Yotam    schedule 01.03.2014
comment
@Paulie_D jsfiddle.net/NxqLk/embedded/result Извините за все комментарии, система запрещает мне многократно уведомлять вас.   -  person Yotam    schedule 01.03.2014
comment
Вероятно, это и то, и другое: проблема с размером окна (нет doctype? xml prolog? и IE переходит в режим причуд) и поиск в IE 10 или выше, который полностью удалил условные комментарии IE.   -  person JohanVdR    schedule 02.03.2014
comment
@Sigma Так какое решение? что я должен сделать, чтобы исправить это?   -  person Yotam    schedule 02.03.2014
comment
Я должен видеть исходный код. Скрипт JS по умолчанию добавляет тип документа html 5. И в какой версии IE вы отлаживаете.   -  person JohanVdR    schedule 02.03.2014
comment
Они называются условными комментариями, а не взломом IE.   -  person rvighne    schedule 02.03.2014

Ответы (3)


arrow_upward
0
arrow_downward 

    <!--[if IE]>
        <style>
            .right_header_form{
                margin: 20px 0 0;
            }
            .right_form {
                margin: 20px 0 0;
            }
        </style>
    <![endif]-->
    <link rel="stylesheet" href="css/style.css" type="text/css" />

Проверил ваш PHP-код в mediafire.
Ваши стили для IE перезаписаны, потому что условие IE стоит первым в коде. Сначала должен быть style.css. Приоритет CSS.

Должно быть:

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--[if IE]>
        <style>
            .right_header_form{
                margin: 20px 0 0;
            }
            .right_form {
                margin: 20px 0 0;
            }
        </style>
    <![endif]-->
person JohanVdR    schedule 01.03.2014
comment
Это ничего не изменило, в Firefox все работает, а в IE нет. - person Yotam; 02.03.2014
comment
У вас также была одна ошибка в вашем html. Атрибут alt обязателен для изображений. - person JohanVdR; 02.03.2014
comment
@Sigma: это не ошибка, потому что в HTML нет настоящих ошибок; это не должно повлиять на эту проблему. Но, конечно, нестандартно опускать alt. - person rvighne; 02.03.2014
comment
Использование отрицательных полей может усложнить визуализацию макета. Может быть, попытаться избежать этого все вместе. И используйте отступы в относительных контейнерах, чтобы добавить вертикальный интервал или верхние поля с положительными значениями. - person JohanVdR; 02.03.2014

arrow_upward
0
arrow_downward

Проблема в

margin: -390px 50px 0;

По сути, вы предполагаете, что высота .main_form равна 390px, поэтому вы заставляете .right_header_form подниматься на 390px вверх.

Это плохо.

Прежде чем кодировать страницу, вы должны продумать хороший дизайн.

В этом случае создайте два столбца и разместите их один рядом с другим плавающим первым (и вторым по желанию). И поместите заголовки внутри каждого столбца.

person Oriol    schedule 01.03.2014

arrow_upward
0
arrow_downward

Обратите внимание, что условные комментарии работают только для INTERNET EXPLORER 9 и НИЖЕ, начиная с IE10 и выше, они отключены.

Я рекомендую вам поместить свой IE CSS в другой файл css с именем iestyle.css и назвать его следующим образом:

<!--[if IE]>
  <link rel=”stylesheet” type=”text/css” href=”iestyle.css”/>
<![endif]-->

Это должно работать,

Удачи.

PS: ТАКЖЕ

Вы можете использовать условные комментарии в своем HTML-коде, чтобы применять различные классы CSS или идентификаторы к элементам, на которые затем можно настроить таргетинг с помощью CSS.

Работает примерно так:

<!--[if IE]>
  <div id="content" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="content">
<![endif]-->

Что это делает, так это то, что для IE он добавляет класс «ie», который вы указываете в своем CSS, и когда это НЕ IE !IE, он не добавляет этот класс.

person Community    schedule 03.04.2014