Another way to use conditional comments
Hello habrovchane, I wanted to share another option valid hack for Internet Explorer'a.
Since it is not always convenient to render styles for IE a separate file, especially in some projects, when you want to see styles for certain pages in one file.
I want to describe two solutions to this problem:
We add a body for the body with the browser name of a certain version, conditional comments help to get rid of the problem with incorrect recognition of the User Agent.
In this case, if you need to change the block style only for IE
')
in CSS specifies:
But this method is not suitable in all cases, for example, when the user has javascript disabled.
This option involves creating a wrapper inside the body or around the element itself with a specific class that only IE will see:
Or you can do without a common class for IE 7 and IE 8
and in CSS, specify classes, separated by commas:
Usage example
PS This method is not special or unique, but in some cases it may be useful.
Since it is not always convenient to render styles for IE a separate file, especially in some projects, when you want to see styles for certain pages in one file.
I want to describe two solutions to this problem:
1. Option using javascript:
We add a body for the body with the browser name of a certain version, conditional comments help to get rid of the problem with incorrect recognition of the User Agent.
<!--[if IE 7]> <script type="text/javascript"> document.body.className='ie7'; </script> <![endif]--> <!--[if IE 8]> <script type="text/javascript"> document.body.className='ie8'; </script> <![endif]--> In this case, if you need to change the block style only for IE
<body> <div class="example"> <p> <strong></strong> , </p> </div> </body> ')
in CSS specifies:
.example p{ color: green; } .ie8 .example p{/* IE 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/* IE 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{/* IE 7 IE8*/ color: #000; } But this method is not suitable in all cases, for example, when the user has javascript disabled.
2. Option without JavaScript and without rendering styles for IE in a separate file:
This option involves creating a wrapper inside the body or around the element itself with a specific class that only IE will see:
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <!--[if lt IE 9]> <div class="lte9"> <![endif]--> <div class="example"> <p> <strong></strong> , </p> </div> <!--[if lt IE 9]> </div> </div> <![endif]--> </body> Or you can do without a common class for IE 7 and IE 8
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <div class="example"> <p> <strong></strong> , </p> </div> <!--[if lt IE 9]> </div> <![endif]--> </body> and in CSS, specify classes, separated by commas:
.example p{ color: green; } .ie8 .example p{/* 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/* 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{ color: #000; } Usage example
PS This method is not special or unique, but in some cases it may be useful.
Source: https://habr.com/ru/post/138118/
All Articles