CSS 和跨浏览器圆角答案

【问题标题】：CSS and Cross Browser Rounded CornersCSS 和跨浏览器圆角
【发布时间】：2012-04-24 09:05:33
【问题描述】：

我一直在尝试实现跨浏览器圆角的解决方案，尽管该演示适用于所有浏览器，但当我尝试在我自己的代码中实现它时，它适用于所有浏览器除了 IE8.

这是我的 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 之外，它们都显示在右边）。

【问题讨论】：

w3schools.com/cssref/css3_pr_border-radius.asp - 边框半径在 IE8 上效果不佳。
行为：url("border-radius.htc");仅适用于所有四个角。这可能是您在 IE8 中获得圆角的唯一其他选择：snook.ca/archives/html_and_css/rounded_corners_experiment_ie 除了使用图像
亲爱的看到我的回答，如果有任何问题，请告诉我。

标签： css internet-explorer-8 rounded-corners

【解决方案1】：

stackoverflow 上的其他人已经使用 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/ （有关职位的更多信息：relative hack）

sass 库 Compass 也提供了跨浏览器的边框半径，但我没有使用 ie8 的经验

【讨论】：

+1 为什么要重新发明轮子——它已经有了圆润的边角！！！对不起，无法抗拒。在相关的注释上...今天我阅读了一个源评论 - Dropbox 不再支持 ie6...

【解决方案2】：

查看小提琴的演示：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 基础圆角以实现跨浏览器兼容性

【讨论】：