ie6 圓角處理，ie6圓角

ie6 圓角處理，ie6圓角

border-radius瀏覽器安全色性：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支援 border-radius 屬性。 

我們都知道可以border-radius來給元素添加圓角；但是不僅ie6，ie7不支援這個，連ie8也是不支援這個屬性的。如何讓其它的瀏覽器也支援圓角呢？ 今天我分享一下我的做法：   原理很簡單就是將四個角切下來，用絕對位置的方式分別遮住四個方角以達到圓角的效果。 注意：這裡的圓角需要同時將背景（也就是黃色部分）的部分切下來，不然會出現左下角的那種方角沒有被遮住的情況。 這是代碼:

<style>
.box {
position:relative;
width: 99px;
height: 99px;
padding:9px;
border: 1px solid #F00;
background-color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
}
/*以下是不支援border-radius的瀏覽器所需要的代碼*/
.r1, .r2, .r3, .r4 {
position: absolute;
height: 10px;
width: 10px;
background-image: url(img/r.png);
background-repeat: no-repeat;
overflow:hidden;
}
.r1{ top:-1px; left:-1px; background-position:0 0;}
.r2{ top:-1px; right:-1px; background-position:-10px 0;}
.r3{ bottom:-1px; left:-1px; background-position:0 -10px;}
.r4{ bottom:-1px; right:-1px; background-position:-10px -10px;}
</style>

css

 1 <style> 2 .box { 3     position:relative; 4     width: 99px; 5     height: 99px; 6     padding:9px; 7     border: 1px solid #F00; 8     background-color: #FFF; 9     -webkit-border-radius: 10px;10         -moz-border-radius: 10px;11                  border-radius:10px;12 }13 /*以下是不支援border-radius的瀏覽器所需要的代碼*/14 .r1, .r2, .r3, .r4 {15     position: absolute;16     height: 10px;17     width: 10px;18     background-image: url(img/r.png);19     background-repeat: no-repeat;20     overflow:hidden;   21 }22 .r1{ top:-1px; left:-1px; background-position:0 0;}23 .r2{ top:-1px; right:-1px; background-position:-10px 0;}24 .r3{ bottom:-1px; left:-1px; background-position:0 -10px;}25 .r4{ bottom:-1px; right:-1px; background-position:-10px -10px;}26 </style>

1  <div class="box"><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i>2         <!--這裡是其它的內容-->3 </div>

    

但是在ie6裡面會出現四個角上會有邊線的問題;

這是由於ie6在絕對位置的時候如果父級容器的高或者寬是單數,就會在right和bottom上有1像素的bug！（這個高度和寬度是innerwidth和innerheight）

如果是雙數則不會出現這個問題;

 

這個Bug得採用js來解決,這裡我就不仔細講了，具體請看demo;

優點：1.不限制元素的大小;2.採用絕對位置，不會影響布局;3.漸進增強，對於支援border-radius的瀏覽器我們可以隱藏這四個角上的元素。4.相容IE6; 缺點:1.html裡面需要額外添加四個多餘的元素;2.css也需要添加定位的樣式;3.還需要添加一個額外的圖片;4.如果需要相容ie6還得有可能還得採用Js;