CSS和跨瀏覽器的圓角

我一直在努力實現跨瀏覽器的解決方案圓角即使演示工作在所有的瀏覽器，當我嘗試實現它自己的代碼，它在所有瀏覽器作品除 IE8。CSS和跨瀏覽器的圓角

這裏是我的CSS：

body { background:#ffffff url("images/bg.gif") repeat-x ; 
font-family:verdana,helvetica,sans-serif ; 
font-size:12px ; 
color:#000000 ; 
margin:0 auto ; 
padding:0 ; 
} 

.clear { clear:both } /* clears floats */ 




/* #container defines layout width and positioning */ 
#container { width:1000px ; 
margin:auto ; 
position:relative ; 
z-index:inherit ; 
zoom:1 ; /* enables rounded corners in IE6 */ 
} 

#header { width:1000px ; 
height:75px ; 
padding:10px 0px 10px 0px ; 
} 

    #header-logo { float:left ; 
    width:255px ; 
    height:55px ; 
    background:url("http://template.sophio.com/images/logo.png") no-repeat ; 
    } 

    #header-phone { float:left ; 
    display:block ; 
    line-height:55px ; 
    background:url("images/header-phone-bg.png") no-repeat ; 
    background-position:0px 0px ; 
    font-size:28px ; 
    color:#900 ; 
    font-weight:bold ; 
    padding-left:50px ; 
    margin:0px 0px 0px 120px ; 
    } 

    #header-right { float:right ; 
    width:225px ; 
    } 

     #header-right-translate { display:block ; 
     text-align:right ; 
     background:#ffffff ; 
     line-height:26px ; 
     } 

     #header-right-social { display:block ; 
     text-align:right ; 
     background:#FF9 ; 
     line-height:24px ; 
     margin-top:5px ; 
     } 

#navbar { width:1000px ; 
height:32px ; 
background:#9d9687 url("images/header-bg.gif") repeat-x ; 
border:1px solid #494437 ; 
-moz-border-radius: 11px 11px 0px 0px ; 
-webkit-border-radius: 11px 11px 0px 0px ; 
border-radius: 11px 11px 0px 0px ; 
behavior: url("border-radius.htc"); 
}

，這裏是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Two Column Right</title> 
<link rel="stylesheet" href="../style.css" type="text/css" /> 
</head> 

<body> 

<div id="container"> 
    <div id="header"> 
     <div id="header-logo"></div> 
     <div id="header-phone">888-563-2591</div> 
     <div id="header-right"> 
      <div id="header-right-translate"> 
      [Google Translate Widget Here]   
      </div> 
      <div id="header-right-social"> 
      [Social Icons Widget Here] 
      </div> 
     </div> 
    </div> 

    <div id="navbar">text</div> 
</div> 


</body> 
</html>

導航欄就是我申請圓角。

在IE8中，我所有的角落是圓的，而我只想左上角和右下角要舍（它們顯示正確的，但在所有IE8）。

來源

2012-04-12 Cynthia

http://www.w3schools.com/cssref/css3_pr_border-radius.asp - 邊界半徑不IE8發揮好。 – FiveTools 2012-04-12 02:09:17

behavior：url（「border-radius.htc」）;將只適用於所有四個角落。這可能是用於獲取圓角在IE8你唯一的選擇：從使用圖像 – kmb64 2012-04-12 02:18:59

親愛的看到我的答案，讓我知道如果任何問題http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/分開。 – w3uiguru 2012-04-12 02:50:59

此問題已經解決由他人計算器通過使用CSSPIE：http://css3pie.com/

爲了倒圓的角部，以在IE 8正常顯示，與倒圓的角部的元件必須具有：

position: relative;

在CSS中設置。

看到：

CSS rounded corners in IE8

Border Radius for IE8

Border-radius for IE7 & IE8

也： http://jc-designs.net/blog/2010/07/getting-border-radius-to-work-in-ie/ （關於位置的詳細信息：相對破解版）

的上海社會科學院圖書館康巴絲S還提供了跨瀏覽器的邊界半徑，但我不得不使用它與IE8

沒有經驗

來源

2012-04-12 02:26:21 pepperdreamteam

+1爲什麼要推倒重來 - 它已經得到了很好的圓角！對不起，無法抗拒。與此相關的...今天我讀了源評論 - Dropbox的不再支持IE6 ... – 2012-04-12 02:28:40

見搗鼓演示：http://jsfiddle.net/esjzX/1/，http://jsfiddle.net/esjzX/1/embedded/result/

Css: 

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} 

.rs1{margin: 0 2px} 
.rs2{margin: 0 1px} 
div.container{ margin: 0 10%;background: #9BD1FA} 

HTML: 

<div class="container"> 
<b class="rtop"> 
    <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> 
</b> 
<h1 align="center">Hi!</h1> 
    <p>Rounded corners for cross browsers</p> 
<b class="rbottom"> 
    <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> 
</b> 
</div> 
<br /><br /> 
<div class="container"> 
<b class="rtop"> 
    <b class="rs1"></b> <b class="rs2"></b> 
</b> 
<h1 align="center">Hi!</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
<b class="rbottom"> 
    <b class="rs2"></b> <b class="rs1"></b> 
</b> 
</div>

屏幕截圖：純CSS基地圓角的跨瀏覽器兼容

enter image description here

來源

2012-04-12 02:42:50 w3uiguru

CSS和跨瀏覽器的圓角

回答

相關問題