如何获取此站点上的选项卡边框以显示四舍五入?

时间:2012-04-14 22:49:24

标签: html css internet-explorer firefox

我有一个网站......

http://samyoga.apphb.com

当我查看Firebug时,我在导航标签上看到圆角。但是,当我在IE中查看时,我不这样做。当我在IE开发人员工具中查看CSS时,真正让我感到困惑的是......

enter image description here

但是当我看到CSS时......

#menu {
    width: 940px;
    height: 58px;
    margin: 0px auto;
    padding: 0px 20px 0px 20px;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu li {
    display: inline;
    text-align:justify;
}

#menu a {
    margin: 0px;
    padding: 10px 12px 10px 12px;
    line-height: 56px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #262626;
    border: none;
}



/*set the radius*/
#menu .current_page_item a, #menu .current_page_item a:hover {
    background: #E91370;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-top-left-radius:4px;
}


#menu a:hover {
    background: #FF77C8;
    text-decoration: none;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-top-left-radius:4px;

}

地球上所有这些额外的财产来自哪里?我怎样才能使边缘变圆,因为当我设置^ CSS时它不会显示在IE上并不确定我做错了什么?

1 个答案:

答案 0 :(得分:4)

使用doctype,因此IE切换到标准模式以显示页面。目前你处于Quirks模式,大致是IE 5的页面渲染。你不希望这样。如初。

令我惊讶的是你没有看到它,因为你已经在开发人员工具中,在菜单栏中显示了渲染模式:

enter image description here

我不确定你的意思»所有这些额外的属性«。看起来IE扩展了填充,边距和边框的速记属性,所以你看到的不仅仅是定义的,但它们是相同的规则。