css - 导航栏以 FF 22 Chrome 27 为中心,但不是 IE 8

标签 css html navigation

我的导航栏居中并且在 Firefox 22 和 Chrome 27 但在 IE 8 中完美运行,我讨厌成为那样的人,但这是怎么回事?如果一切都很好,那不是很好吗,如果这与工作无关我不在乎,但我们一直在使用 IE。是否有某种跨浏览器兼容性的资源,或者它只是通过火试验??

CSS 标记

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
.container
{
    width: 1004px;
    margin: 0 auto;
    text-align: center;
}
.navigation
{
    text-align: center;
    display: inline-block;
    list-style-type: none;
    text-align: center;
}
.navigation li
{
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a
{
    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
    background: #262626;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover
{
    color: #F2861D;
}
.navigation ul
{
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li
{
    width: 150px;
    border-top: none;
}
.navigation ul a
{
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover
{
    color: #F2861D;
}

HTML 标记

<div class="container">
    <div class="navigation">
        MY NAVIGATION
    </div>
</div>

最佳答案

在文档顶部使用它:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或者,如果可能的话:

.container{
   width:100%; //auto
   margin:0 auto;
   text-align:center;
}

相关问题:

Using "margin: 0 auto;" in Internet Explorer 8

关于css - 导航栏以 FF 22 Chrome 27 为中心,但不是 IE 8,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18018317/

相关文章:

html - 将 DIV 置于背景图片下,无论视口(viewport)如何(响应式)

html - 如何删除 span 标签之间的空格,同时在每个 span 标签中保留空格?

html - 如何在同一行div上插入2张图片和1个文本框

javascript - 标题下显示 JQuery Mobile "Filter Items"

html - 如何使 Bootstrap 5 卡与 owl-carousel 的卡列中的高度相同?

javascript - 删除导航链接上的事件类

jquery - 下拉导航自动宽度

ios - 快速警报操作不适用于 segue

html - 如何在不知道元素高度的情况下将第二个元素定位到顶部

javascript - 字体大小增加延迟问题