用CSS做圆角 IE8也不支持CSS圆角

Posted by bower on June 16, 2009
cross browser

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

之前听说IE8支持CSS3 大喜过望,没想到只是部分支持,零零碎碎的支持几个CSS3的属性, CSS圆角还是不支持
firefox , safari, chrome opera, 及khtml和webkit内核的浏览器都支持CSS圆角
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

这段代码可以让以上browser产生圆角,

要想让IE产生圆角,要费一些转折,图片法就不展示了,这是说一下不用图片的方法:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”generator” content=”HAPedit 3.1″>
<style type=”text/css”>
body{padding: 20px;background-color: #FFF;
font: 100.01% “Trebuchet MS”,Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id=”nifty”>
<b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b class=”r3″></b><b class=”r4″></b></b>
<h1>Nifty Corners</h1>
Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.
<h2>Rounded corners without images</h2>
Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.
Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.
Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b><b class=”r2″></b><b class=”r1″></b></b>
</div>
</body>
</html>

效果:
点这看效果
针对这个单一的圆角效果,放弃兼容IE。因为兼容IE下的圆角是得不偿失的。
而事实上我接触到的一些项目比如jquery的UI和wordpress的后台之类的,在圆角效果上的确也放弃了对IE的兼容。

分享到:人人网开心网腾讯微博新浪微博豆瓣分享腾讯空间百度搜藏腾讯书签

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word