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和跨浏览器的圆角

回答

相关问题