{"id":599,"date":"2024-12-28T17:57:49","date_gmt":"2024-12-28T09:57:49","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=599"},"modified":"2024-12-28T17:57:49","modified_gmt":"2024-12-28T09:57:49","slug":"%e5%9c%a8-css-%e4%b8%ad%ef%bc%8c%e4%b8%ba%e4%bb%80%e4%b9%88%e6%9f%90%e4%ba%9b%e5%b1%9e%e6%80%a7%e5%89%8d%e9%9d%a2%e6%9c%89%e6%98%9f%e5%8f%b7%ef%bc%88%ef%bc%89%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2024\/12\/28\/%e5%9c%a8-css-%e4%b8%ad%ef%bc%8c%e4%b8%ba%e4%bb%80%e4%b9%88%e6%9f%90%e4%ba%9b%e5%b1%9e%e6%80%a7%e5%89%8d%e9%9d%a2%e6%9c%89%e6%98%9f%e5%8f%b7%ef%bc%88%ef%bc%89%ef%bc%9f\/","title":{"rendered":"\u5728 CSS \u4e2d\uff0c\u4e3a\u4ec0\u4e48\u67d0\u4e9b\u5c5e\u6027\u524d\u9762\u6709\u661f\u53f7\uff08*\uff09\uff1f"},"content":{"rendered":"\n
\n

\u5728 CSS \u4e2d\uff0c\u67d0\u4e9b\u5c5e\u6027\u524d\u9762\u6709\u661f\u53f7\uff08*<\/code>\uff09\u662f\u4e3a\u4e86\u517c\u5bb9 Internet Explorer (IE)<\/strong> \u6d4f\u89c8\u5668\uff0c\u7279\u522b\u662f IE 6\u3001IE 7<\/strong> \u548c IE 8<\/strong> \u7248\u672c\u3002\u8fd9\u79cd\u505a\u6cd5\u5e76\u4e0d\u662f\u6807\u51c6\u7684 CSS \u8bed\u6cd5\uff0c\u800c\u662f\u7279\u5b9a\u4e8e\u8fd9\u4e9b\u6d4f\u89c8\u5668\u7684 hack\uff08\u6280\u5de7\u6216\u201c\u8865\u4e01\u201d\uff09\uff0c\u7528\u6765\u5904\u7406\u8fd9\u4e9b\u6d4f\u89c8\u5668\u7684\u517c\u5bb9\u6027\u95ee\u9898\u3002<\/p>\n<\/blockquote>\n\n\n\n

1. \u661f\u53f7 Hack (*property<\/code>)<\/strong>\uff1a<\/h3>\n\n\n\n

\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528\u661f\u53f7\u4f5c\u4e3a\u524d\u7f00\uff08\u4f8b\u5982 *property<\/code>\uff09\u53ef\u4ee5\u8ba9\u7279\u5b9a\u7684 CSS \u5c5e\u6027\u53ea\u5728 IE 6 \u548c IE 7<\/strong> \u4e2d\u751f\u6548\u3002IE 6 \u548c IE 7 \u4f1a\u89e3\u91ca\u4ee5\u661f\u53f7\u5f00\u5934\u7684 CSS \u5c5e\u6027\uff0c\u4f46\u73b0\u4ee3\u6d4f\u89c8\u5668\u4f1a\u5ffd\u7565\u5b83\u4eec\u3002\u8fd9\u662f\u4e00\u79cd\u9488\u5bf9 IE 6 \u548c 7 \u7684\u6d4f\u89c8\u5668\u7279\u5b9a\u7684 hack\u3002<\/p>\n\n\n\n

\u793a\u4f8b\uff1a*zoom<\/code><\/h4>\n\n\n\n
*zoom: 1;<\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u5c5e\u6027\u7528\u4e8e \u89e6\u53d1\u201chasLayout\u201d<\/strong>\uff08IE \u7279\u6709\u7684\u6982\u5ff5\uff09\uff0c\u5b83\u4f1a\u4f7f\u5143\u7d20\u83b7\u5f97\u66f4\u597d\u7684\u6e32\u67d3\u6548\u679c\u3002\u5728 IE 6 \u548c IE 7 \u4e2d\uff0c\u67d0\u4e9b\u60c5\u51b5\u4e0b\u9700\u8981\u4f7f\u7528 *zoom: 1;<\/code> \u6765\u89e3\u51b3\u5e03\u5c40\u95ee\u9898\uff0c\u7279\u522b\u662f\u4f7f\u6d6e\u52a8\u5143\u7d20\u6b63\u786e\u6e05\u9664\u6d6e\u52a8\u3002\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0d\u7406\u89e3 *zoom<\/code> \u5c5e\u6027\uff0c\u6240\u4ee5\u5b83\u4eec\u4f1a\u5ffd\u7565\u5b83\u3002<\/p>\n\n\n\n
\n\n\n\n
2. \u5176\u4ed6 IE \u7279\u6709\u7684 Hack<\/strong>\uff1a<\/h3>\n\n\n\n
(a) *display<\/code> \u548c *position<\/code><\/strong><\/h4>\n\n\n\n
\u6709\u65f6\u5019\u9700\u8981\u4f7f\u7528 *display<\/code> \u6216 *position<\/code> \u5c5e\u6027\u6765\u89e3\u51b3 IE 6\/7 \u7279\u5b9a\u7684\u5e03\u5c40\u95ee\u9898\u3002<\/p>\n\n\n\n
*display: inline-block;  \/* \u9488\u5bf9 IE 6 \u548c IE 7 \u8fdb\u884c\u4f18\u5316 *\/<\/code><\/pre>\n\n\n\n
(b) *+html<\/code> \u9009\u62e9\u5668<\/strong><\/h4>\n\n\n\n
IE 6 \u548c IE 7 \u5728\u5904\u7406\u67d0\u4e9b CSS \u9009\u62e9\u5668\u65f6\u5b58\u5728\u95ee\u9898\uff0c\u6240\u4ee5\u6709\u65f6\u5019\u4f7f\u7528\u7279\u5b9a\u7684\u9009\u62e9\u5668\u524d\u7f00\uff08\u5982 *+html<\/code>\uff09\u6765\u5f3a\u5236\u5e94\u7528 CSS \u89c4\u5219\u3002<\/p>\n\n\n\n
*+html .example {  \/* \u53ea\u5e94\u7528\u4e8e IE 6 *\/\n  color: red;\n}<\/code><\/pre>\n\n\n\n
\u8fd9\u610f\u5473\u7740 *+html<\/code> \u53ea\u4f1a\u5f71\u54cd IE 6\uff0c\u786e\u4fdd\u5176\u4ed6\u6d4f\u89c8\u5668\u4e0d\u53d7\u5f71\u54cd\u3002<\/p>\n\n\n\n
\n\n\n\n
3. \u4e3a\u4ec0\u4e48 IE \u9700\u8981\u8fd9\u4e9b Hack\uff1f<\/strong><\/h3>\n\n\n\n
IE 6 \u548c 7 \u7684 CSS \u5f15\u64ce\u4e0e\u73b0\u4ee3\u6d4f\u89c8\u5668\u76f8\u6bd4\uff0c\u5b58\u5728\u8bb8\u591a\u6e32\u67d3\u548c\u517c\u5bb9\u6027\u95ee\u9898\u3002\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4e0d\u5b8c\u5168\u9075\u5b88 CSS \u6807\u51c6\uff0c\u5bfc\u81f4\u5f00\u53d1\u8005\u9700\u8981\u4f7f\u7528\u4e0d\u540c\u7684\u65b9\u6cd5\u6765\u4fee\u590d\u7279\u5b9a\u7684\u6837\u5f0f\u95ee\u9898\u6216\u4f7f\u9875\u9762\u663e\u793a\u6b63\u786e\u3002\u56e0\u6b64\uff0cCSS hack \u5982 *zoom<\/code>\u3001*display<\/code> \u7b49\u88ab\u5e7f\u6cdb\u4f7f\u7528\u3002<\/p>\n\n\n\n
\n\n\n\n
4. \u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0d\u518d\u9700\u8981\u8fd9\u4e9b Hack<\/strong><\/h3>\n\n\n\n
\u968f\u7740 IE 8 \u4e4b\u540e\u7684\u7248\u672c\u7684\u63a8\u51fa\uff0cIE \u9010\u6e10\u6539\u8fdb\u4e86\u5bf9\u6807\u51c6 CSS \u89c4\u8303\u7684\u652f\u6301\uff0c\u540c\u65f6\u73b0\u4ee3\u6d4f\u89c8\u5668\uff08\u5982 Chrome\u3001Firefox\u3001Edge\uff09\u4e5f\u66f4\u597d\u5730\u652f\u6301\u4e86 CSS\uff0c\u5f00\u53d1\u8005\u4e0d\u518d\u9700\u8981\u4f7f\u7528\u8fd9\u4e9b\u524d\u7f00\u6765\u5904\u7406\u5e03\u5c40\u95ee\u9898\u3002<\/p>\n\n\n\n
\n\n\n\n
5. \u66ff\u4ee3\u65b9\u6848<\/strong><\/h3>\n\n\n\n
\u73b0\u4ee3\u5f00\u53d1\u4e2d\uff0c\u968f\u7740 IE \u9010\u6b65\u9000\u51fa\u4e3b\u6d41\uff0cCSS Hack \u7684\u4f7f\u7528\u8d8a\u6765\u8d8a\u5c11\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u4f7f\u7528\u66f4\u597d\u7684\u517c\u5bb9\u6027\u89e3\u51b3\u65b9\u6848\uff0c\u5982\uff1a<\/p>\n\n\n\n
    \n
  • CSS \u81ea\u9002\u5e94\u5e03\u5c40<\/strong>\uff08\u4f7f\u7528 flexbox<\/code>\u3001grid<\/code> \u7b49\u5e03\u5c40\u65b9\u5f0f\uff09\u3002<\/li>\n\n\n\n
  • CSS \u91cd\u7f6e\uff08Normalize\uff09<\/strong>\uff0c\u6765\u5904\u7406\u4e0d\u540c\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u6837\u5f0f\u3002<\/li>\n\n\n\n
  • CSS \u524d\u7f00<\/strong>\uff08\u5982 -webkit-<\/code>\u3001-moz-<\/code> \u7b49\uff09\u6765\u5904\u7406\u7279\u5b9a\u6d4f\u89c8\u5668\u7684\u5b9e\u73b0\u7ec6\u8282\uff0c\u4f46\u8fd9\u4e0e IE Hack \u4e0d\u540c\uff0c\u5b83\u4eec\u662f\u5b98\u65b9\u6807\u51c6\u7684\u4e00\u90e8\u5206\u3002<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \u603b\u7ed3\uff1a<\/h3>\n\n\n\n
    \u661f\u53f7\u524d\u7f00\uff08\u5982 *property<\/code>\uff09\u662f\u4e3a\u4e86\u517c\u5bb9\u8001\u65e7\u7684 IE 6 \u548c IE 7\uff0c\u89e3\u51b3\u5b83\u4eec\u5728\u6e32\u67d3\u548c\u5e03\u5c40\u65f6\u7684\u517c\u5bb9\u6027\u95ee\u9898\u3002\u5b83\u4eec\u4e0d\u662f\u6807\u51c6\u7684 CSS \u8bed\u6cd5\uff0c\u5e76\u4e14\u73b0\u4ee3\u6d4f\u89c8\u5668\u548c\u65b0\u7248\u7684 IE\uff08IE 9 \u53ca\u4ee5\u4e0a\uff09\u5df2\u4e0d\u518d\u9700\u8981\u8fd9\u4e9b hacks\uff0c\u5f00\u53d1\u8005\u5e94\u8be5\u5c3d\u91cf\u907f\u514d\u4f7f\u7528\u8fd9\u4e9b\u8fc7\u65f6\u7684\u6280\u672f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u5728 CSS \u4e2d\uff0c\u67d0\u4e9b\u5c5e\u6027\u524d\u9762\u6709\u661f\u53f7\uff08*\uff09\u662f\u4e3a\u4e86\u517c\u5bb9 Internet Explorer (IE) \u6d4f\u89c8\u5668\uff0c\u7279\u522b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-599","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/599\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/599\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}