CSS和跨浏览器圆角

Question

CSS和跨浏览器圆角

Cyn*_*hia 0 css rounded-corners internet-explorer-8

我一直在努力实施跨浏览器圆角的解决方案,即使演示工作在所有的浏览器,当我尝试实现它自己的代码,它在所有浏览器除了 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");
}

Run Code Online (Sandbox Code Playgroud)

这是我的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>

Run Code Online (Sandbox Code Playgroud)

导航栏是我应用圆角的原因.

在IE8中,我的所有角都是圆角的,而我只希望左上角和右上角是圆角的(除了IE8外,它们都显示在右边).