{"id":3801,"date":"2010-06-24T13:29:31","date_gmt":"2010-06-24T05:29:31","guid":{"rendered":"https:\/\/case.ntu.edu.tw\/blog\/?p=3801"},"modified":"2017-03-31T23:21:21","modified_gmt":"2017-03-31T15:21:21","slug":"%e3%80%90%e9%9b%bb%e8%85%a6%e7%a7%91%e6%8a%80%e3%80%91%e9%a0%bb%e7%95%b6%e6%a9%9f%ef%bc%81%e7%99%bc%e7%8b%a0%e7%94%a8%e7%b4%94css%e8%aa%9e%e6%b3%95%e7%95%ab%e5%87%ba%e6%8e%a8%e7%89%b9%e7%95%b6","status":"publish","type":"post","link":"https:\/\/case.ntu.edu.tw\/blog\/?p=3801","title":{"rendered":"\u3010\u96fb\u8166\u79d1\u6280\u3011\u983b\u7576\u6a5f\uff01\u767c\u72e0\u7528\u7d14CSS\u8a9e\u6cd5\u756b\u51fa\u63a8\u7279\u7576\u6a5f\u9be8\u9b5a"},"content":{"rendered":"<p style=\"text-align: center;\"><strong><span style=\"color: #800000;\">\u25a0 \u6700\u8fd1\u6b63\u503c\u4e16\u8db3\u8cfd\u671f\u9593\uff0c\u8f49\u64ad\u6642\u523b\u7db2\u8def\u4eba\u6f6e\u6d36\u6e67\uff0c\u4eba\u6c23\u5fae\u7db2\u8a8c\u7db2\u7ad9\u63a8\u7279\uff08Twitter\uff09\u537b\u8001\u662f\u7576\u6a5f\uff0c\u4f7f\u5f97\u62db\u724c\u300c\u7576\u6a5f\u9be8\u9b5a\u300d\u4e00\u76f4\u62cb\u982d\u9732\u9762\u3002\u7d10\u897f\u862d\u7a0b\u5f0f\u8a2d\u8a08\u5e2b\u56e0\u6b64\u756b\u51fa\u4e86\u7d14\u7cb9CSS\u8a9e\u6cd5\u7684\u7576\u6a5f\u9be8\u9b5a\u3002<\/span><\/strong><\/p>\n<p><strong>\u64b0\u6587<\/strong> \u2223 \u963f\u5b85\u6e38\u64ca\u968a\u9577<\/p>\n<figure id=\"attachment_3802\" aria-describedby=\"caption-attachment-3802\" style=\"width: 690px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.subcide.com\/experiments\/fail-whale\/\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-3802 \" title=\"failwhale\" src=\"http:\/\/case.ntu.edu.tw\/blog\/wp-content\/uploads\/2010\/06\/failwhale.png\" alt=\"failwhale\" width=\"690\" height=\"315\" \/><\/a><figcaption id=\"caption-attachment-3802\" class=\"wp-caption-text\">\u9ede\u6211\u53ef\u4ee5\u9023\u5230CSS\u9be8\u9b5a\u7684demo\u9801\u9762\uff01\u770b\u770b\u4f60\u80fd\u5426\u770b\u5f97\u5230<\/figcaption><\/figure>\n<p>\u3000\u3000\u8fd1\u4f86\u5982\u706b\u5982\u837c\u9032\u884c\u4e2d\u7684\u4e16\u754c\u76c3\u8db3\u7403\u8cfd\u9020\u6210\u4e86\u4e00\u4e9b\u610f\u60f3\u4e0d\u5230\u7684\u8ca2\u737b\uff0c\u8b6c\u5982\u589e\u9032\u4e86\u7a0b\u5f0f\u8a2d\u8a08\u5e2b\u904b\u7528CSS\u8a9e\u6cd5\u7684\u6280\u8853\u3002\u4e0a\u9031\u4e16\u754c\u6700\u5927\u7684\u5fae\u7db2\u8a8c\u7db2\u7ad9\u63a8\u7279\uff08Twitter\uff09\u7528\u6236\u983b\u983b\u770b\u898b\u300c\u9be8\u9b5a\u300d\uff0c\u64da\u8aaa\u539f\u56e0\u4e4b\u4e00\u662f\u592a\u591a\u4eba\u540c\u6642\u5728\u63a8\u7279\u4e0a\u5206\u4eab\u4e16\u8db3\u8cfd\u7684\u9032\u5c55\uff0c\u5c0e\u81f4\u5167\u90e8\u6d41\u91cf\u904e\u5927\u3002<\/p>\n<p>\u3000\u3000\u8a31\u591a\u63d0\u4f9b\u670d\u52d9\u7684\u7db2\u8def\u5e73\u53f0\u90fd\u6709\u5c6c\u65bc\u81ea\u5df1\u7684\u7576\u6a5f\u756b\u9762\uff0c\u800c\u4e14\u4e0d\u5c11\u8ddf\u52d5\u7269\u6709\u95dc\u3002\u8b6c\u5982\u53f0\u7063\u75de\u5ba2\uff08pixnet\uff09\u51fa\u73fe\u7684\u662f\u7a31\u70ba\u300c\u75de\u5ba2\u72d0\u300d\u7684\u7d05\u72d0\u72f8\uff0c\u6234\u8457\u5de5\u5730\u5e3d\u8868\u793a\u6b63\u5728\u52aa\u529b\u6436\u4fee\u4e2d\uff1b\u800c\u63a8\u7279\u5247\u662f\u4e00\u96bb\u53ef\u611b\u7684\u9be8\u9b5a\uff0c\u6b63\u88ab\u4e00\u7fa4\u5c0f\u9ce5\u53fc\u8d77\u4f86\uff08\u770b\u8d77\u4f86\u5f88\u8cbb\u529b\u7684\u6a23\u5b50\uff01\uff09\u3002\u770b\u898b\u72d0\u72f8\u8ddf\u9be8\u9b5a\u7e3d\u662f\u6bd4\u770b\u898b\u767d\u5e95\u9ed1\u5b57\u7684\u300c\u932f\u8aa4\u300d\u6216\u300c\u9023\u7dda\u903e\u6642\u300d\u611f\u89ba\u597d\u591a\u4e86\u3002<\/p>\n<p><!--more--><\/p>\n<p>\u3000\u3000\u7136\u800c\u4e0a\u9031\u63a8\u7279\u5be6\u5728\u7576\u6389\u592a\u591a\u6b21\u4e86\uff0c\u7528\u6236\u8001\u662f\u770b\u5230\u300c\u7576\u6a5f\u9be8\u9b5a\u300d\uff08fail whale\uff09\u3002\u4e00\u540d\u7d10\u897f\u862d\u7684\u7a0b\u5f0f\u8a2d\u8a08\u5e2b<a href=\"http:\/\/www.subcide.com\/about\/\" target=\"_blank\">Steve Dennis<\/a>\u661f\u671f\u65e5\u65e9\u4e0a\u8d77\u4f86\u767c\u73fe\u53c8\u662f\u9be8\u9b5a\u756b\u9762\u5728\u8aaa\u54c8\u56c9\uff0c\u4e00\u6c23\u4e4b\u4e0b\u958b\u59cb\u7528CSS\u8a9e\u6cd5\u756b\u9019\u96bb\u9be8\u9b5a\u3002\u4ed6\u7684\u6210\u679c\u770b\u8d77\u4f86\u5929\u8863\u7121\u7e2b\u2014\u53ea\u8981\u4e0d\u7528IE8\u4ee5\u4e0b\u7684\u700f\u89bd\u5668\u958b\u7684\u8a71\u3002\u6839\u64daSteve Dennis\u7684\u7db2\u8a8c\uff0cCSS\u7576\u6a5f\u9be8\u9b5a\u662f\u300c\u7d14\u624b\u5de5\u88fd\u4f5c\u300d\uff0c\u904b\u7528\u4e86\u5927\u91cf\u7684\u4e0d\u898f\u5247\u908a\u754c\u534a\u5f91\u5c6c\u6027\uff08uneven border-radius properties\uff0c\u53ef\u4ee5\u7522\u751f\u5713\u89d2\u6548\u679c\uff09\uff0c\u81f3\u65bc\u7dda\u4e4b\u985e\u7684\u6771\u897f\u5247\u662f\u5728container\u52a0\u4e0aoverflow: hidden\u800c\u507d\u88dd\u51fa\u4f86\u7684\u3002<\/p>\n<p>\u3000\u3000\u7576\u6a5f\u9be8\u9b5a\u53ef\u4ee5\u5728\u5927\u90e8\u5206\u65b0\u7248\u7684\u700f\u89bd\u5668\uff08\u5982Firefox\u8ddfOpera\uff09\u4e0a\u5b8c\u7f8e\u986f\u793a\uff0c\u81f3\u65bc\u4f7f\u7528webkit \u6846\u67b6\u7684\u700f\u89bd\u5668\uff08\u5982Chrome\uff09\u751a\u81f3\u53ef\u4ee5\u770b\u898b<strong>\u52d5\u756b\u64ad\u653e<\/strong>\uff1a\u5c0f\u9ce5\u5c55\u7fc5\u98db\u7fd4\uff0c\u6d77\u6d6a\u524d\u5f8c\u6416\u64fa\u3002\u4f46IE8\u4ee5\u4e0b\u7684\u700f\u89bd\u5668\u5247\u6703\u8b8a\u6210...\u9019\u7a2e\u6a23\u5b50\u3002\u2193<\/p>\n<figure id=\"attachment_3803\" aria-describedby=\"caption-attachment-3803\" style=\"width: 690px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-3803\" title=\"fail-whale-ie8\" src=\"http:\/\/case.ntu.edu.tw\/blog\/wp-content\/uploads\/2010\/06\/fail-whale-ie8.png\" alt=\"fail-whale-ie8\" width=\"690\" height=\"315\" srcset=\"https:\/\/case.ntu.edu.tw\/blog\/wp-content\/uploads\/2010\/06\/fail-whale-ie8.png 690w, https:\/\/case.ntu.edu.tw\/blog\/wp-content\/uploads\/2010\/06\/fail-whale-ie8-600x274.png 600w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><figcaption id=\"caption-attachment-3803\" class=\"wp-caption-text\">\u5728IE\u5e95\u4e0b...\u6b63\u6e2f\u7684\u5931\u6557\u9be8\u9b5a<\/figcaption><\/figure>\n<p>\u3000\u3000Dennis\u8aaa\uff0c\u5728IE8\u4ee5\u4e0b\u7684\u700f\u89bd\u5668\u958b\u8d77\u4f86\u9084\u771f\u7684\u662f\u6b63\u6e2f\u7684\u300cfail whale\uff08\u5931\u6557\u9be8\u9b5a\uff09\u300d\uff01\u4ed6\u4e5f\u8aaa\uff0c\u5e0c\u671b\u81ea\u5df1\u88ab\u63a8\u7279\u7576\u6a5f\u53ca\u756bCSS\u7576\u6a5f\u9be8\u9b5a\u641e\u7838\u7684\u661f\u671f\u5929\uff0c\u80fd\u5920\u63d0\u4f9b\u5176\u4ed6\u7db2\u53cb\u4e00\u4e9b\u6a02\u8da3\u3002\u770b\u8d77\u4f86\u5927\u5bb6\u7684\u78ba\u88ab\u7d14CSS\u8a9e\u6cd5\u9be8\u9b5a\u9017\u5f97\u5f88\u6a02\uff0c\u5728\u4ed6\u7684\u500b\u4eba\u7db2\u8a8c\u5e95\u4e0b\u5df2\u7d93\u6709\u5e7e\u767e\u689d\u7559\u8a00\uff0c\u8aaa\u4ed6\u5011\u5f9e\u5305\u62eciphone\u4e4b\u985e\u7684\u5730\u65b9\u6210\u529f\u770b\u5230\u4e86\u7576\u6a5f\u9be8\u9b5a\uff0c\u300c\u771f\u662f\u68d2\u6975\u4e86\u3002\u300d<\/p>\n<p>?<\/p>\n<pre><span style=\"color: #333333;\">\u5ef6\u4f38\u95b1\u8b80\uff1a<\/span><a href=\"http:\/\/www.subcide.com\/articles\/pure-css-twitter-fail-whale\/\" target=\"_blank\"><span style=\"color: #333333;\">Pure CSS Fail Whale<\/span><\/a><span style=\"color: #333333;\">\uff08\u539f\u6587\u51fa\u8655\uff09\u3001<\/span><a href=\"http:\/\/www.webmonkey.com\/2010\/02\/a_universal_solution_for_rounded_corners_in_your_designs\/\" target=\"_blank\"><span style=\"color: #333333;\">\u89e3\u6c7a\u4f60\u7684\u7db2\u9801\u5713\u89d2\u554f\u984c<\/span><\/a><span style=\"color: #333333;\">\uff08WebMonkey\uff09<\/span><\/pre>\n<p><span style=\"color: #333333;\"><strong><span style=\"color: #003366;\">\u8cac\u4efb\u7de8\u8f2f\uff1aMissZoe<\/span><\/strong><\/span><br \/>\n<a type=\"box_count\" name=\"fb_share\" href=\"http:\/\/www.facebook.com\/sharer.php\">\u5206\u4eab\u5230facebook <\/a><\/p>\n<p><script src=\"http:\/\/static.ak.fbcdn.net\/connect.php\/js\/FB.Share\" type=\"text\/javascript\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u25a0 \u6700\u8fd1\u6b63\u503c\u4e16\u8db3\u8cfd\u671f\u9593\uff0c\u8f49\u64ad\u6642\u523b\u7db2\u8def\u4eba\u6f6e<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,3293],"tags":[374,376,375,132],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3801"}],"collection":[{"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3801"}],"version-history":[{"count":9,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3801\/revisions"}],"predecessor-version":[{"id":27651,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3801\/revisions\/27651"}],"wp:attachment":[{"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/case.ntu.edu.tw\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}