|
|
| |
IE6,IE7 ,FireFox ¿¡ ´ëÇØ CSS ¸ÂÃß±â |
|
|
|
12³â Àü
|
IE7 ÀÇ ·»´õ¸µ ¹æ½ÄÀÌ IE6°ú ´Ù¸£´Ù.
CSS testing of Selector and Pseudo selectors ¸¦ º¸¸é IE7 Àº FF ¿¡ ´õ °¡±î¿Í Áö°í ÀÖ´Ù.
±×·¡¼ ¹Ù¾ßÈå·Î ºê¶ó¿ìÀú 3°³¸¦ ÄÑ°í ÄÚµùÀ» ÇؾßÇÏ´Â ½Ã´ë°¡ ¿Â °ÍÀÌ´Ù.
À̸¦ ÇØ°áÇϱâ À§ÇÑ ¹æ¹ý Áß Çϳª´Â Selector Hack À» ÀÌ¿ëÇÏ´Â °ÍÀÌ´Ù.
.context_bar_form_field
{
height: 15px; // ¸ðµç ºê¶ó¿ìÀú
#height: 15px; // IE Àü¿ë
_height: 21px; // IE6.0 °ú ÀÌÀü¹öÁ¯¿ë
}
¿ì¼± ÆÄÆø¿¡ ¸ÂÃß¾î °³¹ßÀ» ÇÑ ÈÄ E7 ¿¡¼ Á¡°ËÇÑ´Ù. ¼öÁ¤ÇÒ ºÎºÐÀÌ ÀÖ´Ù¸é # Á¢µÎ¾î¸¦ ºÙ¿© ¼öÁ¤ÇØ ÁØ´Ù. #ÀÌ ºÙÀº °ÍÀº FF ¿¡¼ ¹«½ÃÇÑ´Ù. ÇÏÁö¸¸ IE ´Â Àç¼³Á¤ ÇØÁØ´Ù.
´ÙÀ½¿¡ IE6 À» ¿°í ¼öÁ¤ÇÏ¸é¼ _ ¸¦ Á¢µÎ¾î·Î ºÙ¿© »õ·Î Àç¼³Á¤ ÇÑ´Ù. IE7 Àº '-' °¡ ºÙÀº °ÍÀ» ¹«½ÃÇÑ´Ù.
¶Ç ´Ù¸¥ ¹æ¹ýÀº,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }
ÀÌ·¸°Ô ÇÏ´Â ¹æ¹ýµµÀÖ´Ù. ¸Ç ¾Æ·¡ÁÙÀº ÆÄÀ̾îÆø½º¿Í IE7¸¸ Àû¿ëµÈ´Ù.
ÇÑ°¡Áö ÁÖÀÇÇÒ Á¡Àº
body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
¼Ó¼º Å°¿öµå ÀÚü°¡ ´Ù¸¥ °ÍÀÌ ¸¹´Ù. ÁÖÀÇ ÇÒ °Í!
À§¿¡¼ ó·³ ¼Ó¼º°ª ÀÚü°¡ ´Ù¸¥ °æ¿ì°¡ ÀÖ´Ù. ±×·¯´Ï ¾ÈµÈ´Ù°í hack ¸¸ ÃÄ´Ùº¸°í ÀÖÀ¸¸é ¹ã¼¼¾ß ÇÑ´Ù.
³»°¡ º¸±â¿¡ °¡Àå ÁÁÀº ¹æ¹ýÀº Conditional Comments ¸¦ »ç¿ëÇÏ´Â °ÍÀÌ´Ù.
º¹ÀâÇÏ°Ô ÇÑ ÆÄÀÏ¿¡ ±¸Áú±¸Áú ÀÛ¼ºÇÏÁö ¸»°í ÆÄÀÏÀ» ºÐ¸®ÇØ ¹ö¸®´Â °ÍÀÌ´Ù.
Âü°í :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html
<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
<div class="watermark">....</div>...
ÀÌ·¸°Ô ºÐ¸®Çؼ °¢°³°ÝÆÄÇÏ´Â °ÍÀÌ ÁÁÀ» µí ½Í´Ù.
E ¿ëÀÎ expressionÀ» »ç¿ëÇÏ¿© º»´Ù¸é
a { expression(¾î¼±¸ ¹®¹ý) }
ÀÌ·¸°Ô Çؼ a ÅÂ±× Áï, ¸µÅ©¿¡ °É¸° Ç׸ñ¿¡ ´ëÇÏ¿© expressionÀº Àû¿ë ½Ãų ¼ö ÀÖÀ»°ÍÀÔ´Ï´Ù.
±×·³ ¿¹·Î.. ¸µÅ©ÁÖ¼ÒÁß¿¡ pdf ¶óÀº È®ÀåÀÚ°¡ ÀÖ´Ù¸é ¸µÅ© ¾Õ¿¡ ÀÚµ¿À¸·Î PDF ¾ÆÀÌÄÜÀ» ¶ç¿öº¾½Ã´Ù.
a {
padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
ÀÌ°Ç IE ¿ëÀÔ´Ï´Ù. Firefox¿¡¼± ÀÌ·¸°Ô ÇÏ½Ã¸é µË´Ï´Ù.
a[href $='.pdf']{
padding-left: 20px;
background: transparent url(pdf.gif) no-repeat center left;
}
À½... ºÒ¿©½Ã¿¡¼ »ç¿ëÇÏ´Â°Ô ÈξÀ °£ÆíÇϳ׿ä @@;;
[href $='.pdf'] ÀÌ ±¸¹®¿¡¼ $´Â .pdf·Î ³¡³ª´Â °ÍÀ» ÀǹÌÇÕ´Ï´Ù.
.pdf·Î ½ÃÀÛÇÏ´Â °ÍÀ» ãÀ¸·Á¸é $´ë½Å¿¡ ^À» »ç¿ëÇÏ½Ã¸é µË´Ï´Ù.
[href ^='.pdf']°¡ µÇ°ÚÁÒ. ±×³É Æ÷ÇÔ µÇ¾î ÀÖ´ÂÁö¸¦ ã´Â °Å¶ó¸é *À» »ç¿ëÇÏ½Ã¸é µË´Ï´Ù.
<style>
a[href $='.pdf']{
padding-left: 20px;
background: transparent url(pdf.gif) no-repeat center left;
}
a {
padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>
<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a> |
|
̵̧ : 539 |
̵̧
¸ñ·Ï
|
|
| |
|