'CSS 브라우저별로 구분하고 IE에 대응하는 방법'에 해당되는 글 1건

  1. 2012.08.14 CSS 브라우저별로 구분하고 IE에 대응하는 방법
분류없음2012.08.14 19:00
  

Item Example Comment
IE [if IE] The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7]                 The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.



사용방법 : 아래처럼 IE외 브라우저용 CSS를 사용하고 밑에 IE용 CSS를 사용..
<link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="stylesheet" type="text/css" href="editor.css" />
<link rel="stylesheet" type="text/css" href="post.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="basic.ie.css" />
<link rel="stylesheet" type="text/css" href="editor.ie.css" />
<link rel="stylesheet" type="text/css" href="post.ie.css" />

<![endif]-->




다른 예제들..

<!--[if IE 5]>
<p>Welcome to Internet Explorer 5.</p>
<![endif]-->



<!--[if gte IE 5]>
<SCRIPT LANGUAGE="Javascript">
alert("Congratulations! You are running Internet Explorer 5 or greater.");
</SCRIPT>
<P>Thank you for closing the message box.</P>
<![endif]-->



<![if lt IE 5]>
<p>Please upgrade to Internet Explorer version 5.</p>
<![endif]>



<!--[if !IE]>--> HTML <!--<![endif]-->



<!--[if IE 7]><!--> HTML <!--<![endif]-->



<!--[if IE 5]>
<p>Welcome to any incremental version of Internet Explorer 5!</p>
<![endif]-->



<!--[if IE 5.0]>
<p>Welcome to Internet Explorer 5.0!</p>
<![endif]-->



<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->


http://msdn2.microsoft.com/en-us/library/ms537512.aspx




JS에서 Conditional Comments 사용하기는 아래 링크..

ex1. var isMSIE/*@cc_on=1@*/;

ex2. var isMSIE = /*@cc_on!@*/false;


또한 CSS 브라우저별로 구분하고 IE에 대응하는 방법

마진같은것을 플러그인 으로 막아주는 js 가 있다.

   
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

<!--[if lt IE 8]>
<style rel="stylesheet" type="text/css">
#s3sliderContent {
    margin: 0; /* important */   
 }
</style>
<![endif]-->


<!--[if IE 6]>
 <script src="../script/DD_belatedPNG.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');  

 </script>
 <![endif]-->



Posted by 예배하는 프로그래머