IE выравнивание CSS проблемы - PullRequest
3 голосов
/ 10 февраля 2009

У меня есть следующий CSS, который я "взломал" с помощью PHP, потому что он не выровнен должным образом в IE7. Есть ли лучший способ сделать это, не прибегая к PHP?

 #Menu
    {
        width: 100%;
        height: 32px;
        padding-top: <?php if(preg_match('/msie/i', $_SERVER['HTTP_USER_AGENT'])){echo '22px';}else{echo '40px';}?>;
        padding-left: 13px;
    }

Я хочу избежать использования условных комментариев и необходимости поддерживать несколько CSS-файлов.

Ответы [ 5 ]

7 голосов
/ 10 февраля 2009

Вау. Да, не делай этого. Вы захотите использовать условные комментарии, чтобы включить нужный вам CSS. Ваш первый комментатор Бендевей показал, как вы можете легко ориентироваться на IE7. Есть и другие типы условных комментариев, которые позволят вам ориентироваться на другие версии IE.

Вот они:

<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

Если вы планируете внести множество корректировок для разных версий IE, вы можете планировать заранее и использовать трюк "body class". Это выглядит некрасиво в разметке, но это проверенная техника, и иногда это лучше, чем иметь множество таблиц стилей и тегов стилей.

Вот оно:

<!--[if !IE]>--><body><!--<![endif]-->
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->

И в вашей таблице стилей вы просто сбросите любой стиль, который хотите, прикрепив класс к селектору. Как это:

#some_div {
     margin-top:30px;
}
.ie6 #some_div {
     margin-top:40px;
}
.ie7 #some_div {
     margin-top:50px;
}

Надеюсь, это имеет смысл. В любом случае, вы должны использовать условные комментарии вместо PHP.

0 голосов
/ 13 июня 2012
#some_div {
     _margin-top:40px; //Only works on IE6
     *margin-top:30px; //Only works on IE7-IE6
      margin-top:20px\9; //Only works on IE8-IE7-IE6
      margin-top:10px; //Works on all others
}
0 голосов
/ 13 февраля 2009

Обычно, когда я вижу, что разработчики делают подобные вещи, это происходит потому, что они не понимают, что происходит. Затем они получают 3 отдельные копии одного и того же огромного файла CSS; и много головных болей.

IE условных комментариев в безопасный шаг в правильном направлении; тем более, что перехват браузера в вашем примере с php обречен на провал, поскольку строка агента пользователя не гарантируется.

Моя лучшая рекомендация для вас - не торопиться с чтением очень скучной документации по CSS для W3C, если только глава о режимах DISPLAY BLOCK и INLINE. Как только вы прочитаете это, 90% ваших проблем с компоновкой CSS будут решены. Остальное привыкает к самой распространенной ошибке IE6, которая является печально известным режимом «макета».

0 голосов
/ 10 февраля 2009

Действительно трудно сказать, что здесь происходит без демонстрационной страницы, но может ли быть так, что другой элемент на странице увеличивает его на 18 пикселей? Может ли быть так, что на элементе есть запас по умолчанию? Я не могу думать ни о чем другом, как о проблеме с CSS, который вы дали. Могут ли дочерние элементы иметь разный размер в IE и других браузерах?

0 голосов
/ 10 февраля 2009

Этот метод все еще использует некоторые условные комментарии, но, по крайней мере, вы не оцениваете свой код через PHP. Чтобы получить дополнительную помощь, мне нужен полный пример кода.

<style type="text/css">
#Menu    {
    width: 100%;
    height: 32px;
    padding-top: 40px;
    padding-left: 13px;
}
</style>

<!--[if IE]>
<style type="text/css">
#Menu    {
    padding-top: 22px;
}
</style>
<![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...