¡¾×ܽ᡿ä¯ÀÀÆ÷CSS Hacks»ã×Ü
ä¯ÀÀÆ÷¼æÈÝ¿ÉÒÔ˵ÊÇÇ°¶Ë¿ª·¢ËùÒªÃæ¶ÔµÄµÚÒ»¸öÌôÕ½£¬Ä¿Ç°ÎҵĵçÄÔÉÏÒѾ°²×°ÁË6ÖÖä¯ÀÀÆ÷£¨»ùÓÚIEÄں˵IJ»Ë㣬ÈçMaxthonµÈ£©¡£
¡¡¡¡CSS hacksÀûÓÃä¯ÀÀÆ÷µÄ©¶´À´Òþ²ØÌض¨ä¯ÀÀÆ÷µÄCSS¹æÔò¡£ÊµÏÖä¯ÀÀÆ÷¼æÈÝÖ÷ÒªÓÐÁ½ÖÖ·½Ê½Ìõ¼þÑùʽ±íºÍCSS Hacks£¨Selector Hacks¡¢Attribute Hacks£©¡£¶Ô´Ë¸ù¾ÝһЩ×ÊÁÏ»ã×ÜÁËһЩCSS Hacks·½·¨¡£
1.Ìõ¼þÑùʽ±í
ÏñÕâÑùµÄ´úÂëÄãÓ¦¸Ã¼û¹ý:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css" />
< ![endif]-->
PS£ºyahooµÄÄÚ²¿±àÂë×î¼Ñ×ö·¨²¢²»½¨ÒéʹÓÃÓÐÌõ¼þµÄÑùʽ±í¡£Ëü»áÔö¼Ó¶îÍâµÄƽ¾ù1»ò2¸öHTTPÏÂÔØÇëÇ󣨲ο¼ÕâÀ¡£
2. Ñ¡ÔñÆ÷Hacks£¨Selector Hacks£©
/* IE6 ¼°ÒÔÏÂ */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (IE 6,7ÒÔÍâ) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 ¼°ÒÔÏÂ, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* IE6-8ÒÔÍâ */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
PS£ºÑ¡ÔñÆ÷Hacks·½Ê½±È½Ï¶à£¬ µ«Ö»Òª´úÂëдµÃ¹»±ê×¼, ÆäʵҪ Hack µÄµØ·½²»»áºÜ¶àµÄ, ³ýÁËÓÐʱºòIEµ·ÂÒ£¬IE ÒÔÍâµÄä¯ÀÀÆ÷¼
Ïà¹ØÎĵµ£º
Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
</style>
……
<b class="roundBorder">
<b class="round ......
ת×Ô£º
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ͼƬÅÜÂíµÆ</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- ÕâÀïÊǵÚÒ»¸ö¹Ø¼üµã£¬o ......
/*
*´´½¨ÈË£ºÝþÒËÖÒ
*ÓÃ;£ºÑ§Ï°css£¬Ó¦ÓÃÓÚÐÂÎÅϵͳ
*/
*
{
/*°ÑĬÈÏÖµÉèÖÃΪ0*/
margin: 0;
padding: 0;
border-width: 0;
}
body
{
font-size: 14px;
}
a:link£¬a:visited
{
/*Êó ......
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_content¡£
ËùÒÔ£¬¶¨ÒåËüÃǵÄÖ÷ÌåÑùʽ¿ÉÒÔÕâÑù:
#csdnblog_header
{
//Í·²¿µÄ·ç¸ñ
}
# ......