A, IE browser Hack logo

code is as follows:


6 {_property: value; }
7 {+ property: value; }
ie9 {property: value \ \ 0 9; }
lte ie7 {* property: value; }
gte ie8 {property: value \ 0; {that}
all ie property: value \ 9; }
/* note: unless as a last resort, otherwise don't recommend to use hacks, use hacks logo must test all browsers (including new Internet explorer) */

2, ie browser environments hack logo
2.1, all Internet explorer browser

  code is as follows:  


<! - [if] IE >
<Script> Alert (" ie "); </script>
<! [endif]

2.2, the IE browser

  code is as follows:  


<! [if! IE] - >
<Script> Alert ('! Ie '); </script>
<! [endif]

2.3, a single Internet explorer version

  code is as follows:  


<! -- [if IE version number] >
<Script> Alert (' ie version); </script>
<! [endif]

2.4, greater than or equal to the IE version

  code is as follows:  


<! - [if gte IE version] >
<Script> Alert (' gte IE version); </script>
<! [endif]

2.5, less than or equal to the IE version

  code is as follows:  


<! Internet explorer version] - [if lte >
<Script> Alert (' lte IE version); </script>
<! [endif]

2, some of the common problems in the Code

Code is as follows:


the View Code
<! DOCTYPE html>
<Html>
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=gb2312"/>
<Title> Li had list to list li floating bug
<STYLE> Global style
/* */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, and h6, pre, code, and the form, the fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, the article, value, and the details, figcaption, figure, footer, header, menu, nav, section {hgroup, margin: 0; Padding: 0; }
body, button, input, select, textarea {the font: Arial 12 px/1.5, "Microsoft yahei", "Microsoft jas black E 9 ed1 8 96 c5 f6f \ \ "; }
ul {list - style: none; }
img {border: none; }
/* to remove floating style */
the clear - fix: after {content: '. '; Display: block; Height: 0; Visibility: hidden; Clear: both; }
. The clear - fix: {zoom: 1; }
body {background - color: # F00; }
the module {width: 200 px; Height: 300 px; Border: 1 px solid # FFF; Margin: 100 px auto; }
the module ul {width: 100%; Background - color: # 093; }
the module li {width: 100%; Background - color: # CCC; }
the module li span {float: left; Display: inline; The TEXT - ALIGN: center; Width: 50%; The line - height: 60 px; }
</style>
</head>
<Body>
<Div class="module" >
<Ul>
<Li class="clear - fix" ><Span> Span1 </span> <Span> Span2 </span> </li>
<Li class="clear - fix" ><Span> Span1 </span> <Span> Span2 </span> </li>
<Li class="clear - fix" ><Span> Span1 </span> <Span> Span2 </span> </li>
<Li class="clear - fix" ><Span> Span1 </span> <Span> Span2 </span> </li>
<Li class="clear - fix" ><Span> Span1 </span> <Span> Span2 </span> </li>
</ul>
</div>
</body>
</html>

as shown in figure:
shown in Internet explorer 6, 7

               
Code is as follows:


the View Code
<! DOCTYPE html>
<Html>
<Head>
<Meta charset="gb2312"/>
<Title> Vertical center demo< picture;/title>
</head>
<STYLE> Global style
/* */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, and h6, pre, code, and the form, the fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, the article, value, and the details, figcaption, figure, footer, header, menu, nav, section {hgroup, margin: 0; Padding: 0; }
body, button, input, select, textarea {the font: Arial 12 px/1.5, "Microsoft yahei", "Microsoft jas black E 9 ed1 8 96 c5 f6f \ \ "; }
ul {list - style: none; }
img {border: none; }
/* to remove floating style */
the clear - fix: after {content: '. '; Display: block; Height: 0; Visibility: hidden; Clear: both; }
. The clear - fix: {zoom: 1; }
box {width: 800 px; Margin: 100 px auto; }
PIC - wrap {
width: 220 px;
height: 220 px;
border: 1 px solid # F00;
/* standard browser form simulation center */
display: table - cell;
vertical - align: middle;
text - align: center;
/* to prevent by the font and line height the container hold large */
the font size: 0;
the line - height: 1;
* display: block;
+ line - height: 220 px;
_font - size: 192 px;/* */1.14/font size is equal to the height
_font font-family: sans-serif;

}. The PIC - wrap img {
display: inline;/* picture must be inline elements */
vertical - align: middle;
}
</style>
<Body>
<Div class="box" >
<A href="" class=" PIC - wrap "target=" _blank ">
<Img SRC="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" Alt="source XXX" title="source" XXX >
</a>
</div>
</body>
</html>

as shown in figure: three different size of the pictures show, this pictures is not more than images parent container size (sometimes develop can control the output data picture how much is the biggest, images automatically scaling)

  # 0 - #


This concludes the body part