{"id":856,"date":"2011-06-05T00:13:34","date_gmt":"2011-06-04T16:13:34","guid":{"rendered":"http:\/\/feizhaojun.com\/?p=856"},"modified":"2017-04-14T19:15:00","modified_gmt":"2017-04-14T11:15:00","slug":"css-hack-%e5%85%bc%e5%ae%b9%e4%b8%80%e8%a7%88%e8%a1%a8","status":"publish","type":"post","link":"https:\/\/feizhaojun.com\/?p=856","title":{"rendered":"CSS hack \u517c\u5bb9\u4e00\u89c8\u8868"},"content":{"rendered":"

\u539f\u6587\u94fe\u63a5\uff1ahttp:\/\/feizhaojun.com\/doc-archive\/IE6IE7IE8FirefoxChromeSafari\u7684CSS hack\u517c\u5bb9\u4e00\u89c8\u8868.html<\/a><\/p>\n

\n

IE6\/IE7\/IE8\/Firefox\/Chrome\/Safari\u7684CSS hack\u517c\u5bb9\u4e00\u89c8\u8868<\/h2>\n

\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u5bf9CSS\u7684\u89e3\u91ca\u90fd\u6709\u4e00\u70b9\u51fa\u5165\uff0c\u7279\u522b\u662fpadding, line-height\u8fd9\u4e9b\u8981\u7ec6\u5fae\u63a7\u5236\u7684\u5730\u65b9\uff0c\u4e0b\u9762\u7684hack\u57fa\u672c\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff1a
\n\u2022 \u5728\u5c5e\u6027\u524d\u52a0\u4e0b\u5212\u7ebf(_)\uff0c\u90a3\u4e48\u6b64\u5c5e\u6027\u53ea\u4f1a\u88abIE6\u89e3\u91ca
\n\u2022 \u5728\u5c5e\u6027\u524d\u52a0\u661f\u53f7(*)\uff0c\u6b64\u5c5e\u6027\u53ea\u4f1a\u88abIE7\u89e3\u91ca
\n\u2022 \u5728\u5c5e\u6027\u503c\u540e\u9762\u52a0\"\\9\"\uff0c\u8868\u793a\u6b64\u5c5e\u6027\u53ea\u4f1a\u88abIE8\u89e3\u91ca <\/p>\n

\u5404\u6d4f\u89c8\u5668CSS hack\u517c\u5bb9\u8868\uff1a<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
 <\/th>\nIE6<\/strong><\/th>\nIE7<\/strong><\/th>\nIE8<\/strong><\/th>\nFirefox<\/strong><\/th>\nChrome<\/strong><\/th>\nSafari<\/strong><\/th>\n<\/tr>\n
!important<\/strong><\/td>\n <\/td>\nY<\/td>\n <\/td>\nY<\/td>\n <\/td>\n <\/td>\n<\/tr>\n
_<\/strong><\/td>\nY<\/td>\n <\/td>\n <\/td>\n <\/td>\n <\/td>\n <\/td>\n<\/tr>\n
*<\/strong><\/td>\nY<\/td>\nY<\/td>\n <\/td>\n <\/td>\n <\/td>\n <\/td>\n<\/tr>\n
*+<\/strong><\/td>\n <\/td>\nY<\/td>\n <\/td>\n <\/td>\n <\/td>\n <\/td>\n<\/tr>\n
\\9<\/strong><\/td>\nY<\/td>\nY<\/td>\nY<\/td>\n <\/td>\n <\/td>\n <\/td>\n<\/tr>\n
\\0<\/strong><\/td>\n <\/td>\n <\/td>\nY<\/td>\n <\/td>\n <\/td>\n <\/td>\n<\/tr>\n
nth-of-type(1)<\/strong><\/td>\n <\/td>\n <\/td>\n <\/td>\n <\/td>\nY<\/td>\nY<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

\u4ee3\u7801\u5982\u4e0b:<\/div>\n


\n#test{
\ncolor:red; \/* \u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301 *\/
\ncolor:red !important;\/* Firefox\u3001IE7\u652f\u6301 *\/
\n_color:red; \/* IE6\u652f\u6301 *\/
\n*color:red; \/* IE6\u3001IE7\u652f\u6301 *\/
\n*+color:red; \/* IE7\u652f\u6301 *\/
\ncolor:red\\9; \/* IE6\u3001IE7\u3001IE8\u652f\u6301 *\/
\ncolor:red\\0; \/* IE8\u652f\u6301 *\/
\n}
\nbody:nth-of-type(1) p{color:red;} \/* Chrome\u3001Safari\u652f\u6301 *\/
\n<\/code>
\n
\n\u6574\u4f53\u6d4b\u8bd5\u4ee3\u7801\u793a\u4f8b\uff1a <\/p>\n


\n.test{
\ncolor:#000000;
\ncolor:#0000FF\\0;
\n[color:#00FF00;
\n*color:#FFFF00;
\n_color:#FF0000;
\n}
\n<\/code>
\n
\n#menu { line-height: 23px; }\/* firefox \u6d4f\u89c8\u5668\u5b9e\u884c\u8fd9\u53e5\u5b9a\u4e49 *\/
\n#menu { line-height: 26px\\9; }\/*ie6,ie7,ie8 \u8fd9\u53e5\u5b9a\u4e49\u4e3b\u8981\u5c16\u5bf9IE8\u6765hack*\/
\n#menu { *line-height: 23px; }\/*ie6,ie7 \u8fd9\u53e5\u5b9a\u4e49\u4e3b\u8981\u5c16\u5bf9IE7\u6765hack*\/
\n#menu { _line-height: 23px; }\/*ie6 \u6d4f\u89c8\u5668\u4f18\u5148\u5b9e\u884c\u8fd9\u53e5\u5b9a\u4e49*\/
\n\u6216\u8005\u5199\u6210\u4e00\u53e5\uff0c\u6ce8\u610f\u987a\u5e8f
\n#menu { line-height:23px; line-height: 26px\\9; *line-height: 23px; _line-height:23px; }
\n\u6216\u8005
\n* html #menu { line-height: 23px; } \/* IE6 \u6d4f\u89c8\u5668\u5b9e\u884c\u8fd9\u53e5\u5b9a\u4e49 *\/
\n*+html #menu { line-height: 23px; }\/* IE7 \u6d4f\u89c8\u5668\u5b9e\u884c\u8fd9\u53e5\u5b9a\u4e49*\/
\n<\/code>
\n\u5176\u4ed6\u8bf4\u660e\uff1a
\n1\u3001\u5982\u679c\u4f60\u7684\u9875\u9762\u5bf9IE7\u517c\u5bb9\u6ca1\u6709\u95ee\u9898\uff0c\u53c8\u4e0d\u60f3\u5927\u91cf\u4fee\u6539\u73b0\u6709\u4ee3\u7801\uff0c\u540c\u65f6\u53c8\u80fd\u5728IE8\u4e2d\u6b63\u5e38\u4f7f\u7528\uff0c\u5fae\u8f6f\u58f0\u79f0\uff0c\u5f00\u53d1\u5546\u4ec5\u9700\u8981\u5728\u76ee\u524d\u517c\u5bb9IE7\u7684\u7f51\u7ad9\u4e0a\u6dfb\u52a0\u4e00\u884c\u4ee3\u7801\u5373\u53ef\u89e3\u51b3\u95ee\u9898\uff0c\u6b64\u4ee3\u7801\u5982\u4e0b\uff1a
\n<meta http-equiv=\"x-ua-compatible\" content=\"ie=7\" \/>
\n2\u3001body:nth-of-type(1) \u5982\u679c\u8fd9\u6837\u5199\uff0c\u8868\u793a\u5168\u5c40\u67e5\u627ebody\uff0c\u5c06\u4f1a\u5bf9\u5e94\u7b2c\u4e00\u4e2a<body>\u3002
\n3\u3001\u8fd8\u6709\u5176\u4ed6\u5199\u6cd5\uff0c\u6bd4\u5982\uff1a
*html #test{}\u6216\u8005 *+html #test{}
\n4\u3001*+html \u5bf9IE7\u7684hack \u5fc5\u987b\u4fdd\u8bc1HTML\u9876\u90e8\u6709\u5982\u4e0b\u58f0\u660e\uff1a
\nhttp:\/\/www.w3.org\/TR\/html4\/loose.dtd
\n5\u3001\u987a\u5e8f\uff1aFirefox\u3001IE8\u3001IE7\u3001IE6\u4f9d\u6b21\u6392\u5217\u3002
\n\u5c0f\u77e5\u8bc6\uff1a\u4ec0\u4e48\u662fCSS hack\uff1f
\n\u7531\u4e8e\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\uff0c\u6bd4\u5982IE6\u3001IE7\u3001IE8\u3001Firefox\u7b49\uff0c\u5bf9CSS\u7684\u89e3\u6790\u8ba4\u8bc6\u4e0d\u4e00\u6837\uff0c\u56e0\u6b64\u4f1a\u5bfc\u81f4\u751f\u6210\u7684\u9875\u9762\u6548\u679c\u4e0d\u4e00\u6837\uff0c\u5f97\u4e0d\u5230\u6211\u4eec\u6240\u9700\u8981\u7684\u9875\u9762\u6548\u679c\u3002
\n\u8fd9\u4e2a\u65f6\u5019\u6211\u4eec\u5c31\u9700\u8981\u9488\u5bf9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u53bb\u5199\u4e0d\u540c\u7684CSS\uff0c\u8ba9\u5b83\u80fd\u591f\u540c\u65f6\u517c\u5bb9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\uff0c\u80fd\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e2d\u4e5f\u80fd\u5f97\u5230\u6211\u4eec\u60f3\u8981\u7684\u9875\u9762\u6548\u679c\u3002
\n\u8fd9\u4e2a\u9488\u5bf9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u5199\u4e0d\u540c\u7684CSS code\u7684\u8fc7\u7a0b\uff0c\u5c31\u53ebCSS hack\uff0c\u4e5f\u53eb\u5199CSS hack\u3002
\n\u4e0b\u9762\u662f\u8865\u5145\uff1a<\/strong><\/p>\n


\nselector{
\nproperty:value; \/* \u6240\u6709\u6d4f\u89c8\u5668 *\/
\nproperty:value\\9; \/* \u6240\u6709IE\u6d4f\u89c8\u5668 *\/
\n+property:value; \/* IE7 *\/
\n_property:value; \/* IE6 *\/
\n}
\n<\/code>
\n
\n\u5f53\u7136\uff0c\u6ce8\u610f\u987a\u5e8f\u3002\u6839\u636eCSS\u7684\u4f18\u5148\u6027\uff0c\u4e0a\u9762\u7684\u5199\u6cd5\uff0c\u5206\u522b\u9488\u5bf9Firefox\u3001IE8\u3001IE7\u548cIE6\u663e\u793a\u503c\u3002\u8ba9\u6211\u4eec\u770b\u770b\u8fd9\u4e2a\u6f14\u793a\uff1a <\/p>\n

<\/p>\n