Question

我一直在努力为跨浏览器圆角实现解决方案，即使该演示适用于所有浏览器，当我尝试在我自己的代码中实现它时，它适用于所有浏览器，除了 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外，它们都显示在右边）。

Answer 1

通过使用CSSPIE：http://css3pie.com/

，stackoverflow上的其他人已经解决了这个问题

为了在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/ （有关职位的更多信息：相对黑客）

sass库Compass还提供跨浏览器border-radius，但我没有使用ie8的经验

Answer 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基于圆角以实现跨浏览器兼容性

enter image description here

CSS和跨浏览器圆角

2 个答案: