All geek questions in one place

CSS alignment issues

I have the following CSS, which I “hacked” with PHP, because it does not align correctly in IE7. Is there a better way to do this without resorting to 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;
    }

I want to avoid using conditional comments and having to support multiple css files.

+3
source share
5 answers

Wow. Yes, do not do this. You want you to use "conditional comments" to include the css you want. Your first commenter, bendewey, showed how easy it is to configure IP7. There are other types of conditional comments that allow you to target other versions of IE.

Here they are:

<! - [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]-->

reset , , . :

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

, . , , PHP.

+7

- , , , 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]-->
0

, , , 18 ? - ? , CSS, . IE ?

0

, , Dev , , , . , , HUGE CSS; .

IE ; especialyl, , php, , .

- , W3C CSS, DISPLAY BLOCK INLINE. , , 90% css . IE6, "".

0
#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

Source: https://habr.com/ru/post/1702954/

More articles:


All Articles