为什么我的CSS不在Internet Explorer中工作

因此，我使用codeigniter框架构建了一个网页，我有一个简单的页面，在其中使用了一些CSS。除IE 7以外的所有浏览器（以及其他版本的IE，我还没有检查过），我都没有问题。为什么我的CSS不在Internet Explorer中工作

问题是我试图显示选项卡，并启用它看起来像它被点击选中。

我的CSS是：

.nav { 
    margin-bottom: 20px; 
    list-style: none; 
} 

.nav > li > a { 
    display: block; 
} 

.nav > li > a:hover { 
    text-decoration: none; 
    background-color: #eeeeee; 
} 

.nav-tabs:before, 
.nav-tabs:after{ 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.nav-tabs:after { 
    clear: both; 
} 

.nav-tabs > li{ 
    float: left; 
    display: inline; 
} 

.nav-tabs > li > a{ 
    padding-right: 12px; 
    padding-left: 12px; 
    margin-right: 0px; 
    line-height: 14px; 
} 

.nav-tabs { 
    border-bottom: 1px solid #ddd; 
} 

.nav-tabs > li { 
    margin-bottom: -1px; 
} 

.nav-tabs > li > a { 
    padding-top: 8px; 
    padding-bottom: 8px; 
    line-height: 20px; 
    border: 1px solid transparent; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
      border-radius: 4px 4px 0 0; 
} 

.nav-tabs > li > a:hover { 
    border-color: #eeeeee #eeeeee #dddddd; 
} 

.nav-tabs > .active > a, 
.nav-tabs > .active > a:hover { 
    color: #555555; 
    cursor: default; 
    background-color: #ffffff; 
    border: 1px solid #ddd; 
    border-bottom-color: transparent; 
} 

li.selected{ 
    color: #555555; 
    cursor: default; 
    background-color: #ffffff; 
    border: 1px solid #ddd; 
    border-bottom-color: transparent; 
    display:inline; 
}

有我即颇有些问题，是不是就豪尔内嵌显示的列表是不工作，当我选择一个项目没有任何反应。下面是我的文件：

<script type="text/javascript"> 
$(function() { 
    $("#content_of_tab").load('<?php echo site_url('console/show_tab2'); ?>'); 
    document.getElementById("tab2").setAttribute("class", "selected"); 
}); 

function change_tab(a){ 
    //document.getElementById("tab1").setAttribute("class", "unselected"); 
    document.getElementById("tab2").setAttribute("class", "unselected"); 
    document.getElementById("tab3").setAttribute("class", "unselected"); 
    document.getElementById("tab4").setAttribute("class", "unselected"); 
    document.getElementById("tab5").setAttribute("class", "unselected"); 
    document.getElementById("tab6").setAttribute("class", "unselected"); 
    if(a==1){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab1'); ?>'); 
     document.getElementById("tab1").setAttribute("class", "selected"); 
    } 
    else if(a==2){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab2'); ?>'); 
     document.getElementById("tab2").setAttribute("class", "selected"); 
    } 
    else if(a==3){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab3'); ?>'); 
     document.getElementById("tab3").setAttribute("class", "selected"); 
    } 
    else if(a==4){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab4'); ?>'); 
     document.getElementById("tab4").setAttribute("class", "selected"); 
    } 
    else if(a==5){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab5'); ?>'); 
     document.getElementById("tab5").setAttribute("class", "selected"); 
    } 
    else if(a==6){ 
     $("#content_of_tab").load('<?php echo site_url('console/show_tab6'); ?>'); 
     document.getElementById("tab6").setAttribute("class", "selected"); 
    } 
} 
</script> 

<div id="tabs" style="width: 976px;"> 
    <ul class="nav nav-tabs" > 
    <!-- <li id="tab1" onclick="change_tab(1);"><a href="#">Pregled polic</a></li> --> 
     <li id="tab2" onclick="change_tab(2);"><a href="#">Prenos na drug EZŠO</a></li> 
     <li id="tab3" onclick="change_tab(3);"><a href="#">Sprožitev osvežitve</a></li> 
     <li id="tab4" onclick="change_tab(4);"><a href="#">Nadomeščenke</a></li>  
     <li id="tab5" onclick="change_tab(5);"><a href="#">Spremembe statusov</a></li> 
     <li id="tab6" onclick="change_tab(6);"><a href="#">Sprememba zastopnika</a></li> 

    </ul> 
    </br> 
    <div id="content_of_tab" style="margin-left:auto; margin-right:auto;"> 
    </div> 

</div>

这仅仅是其中存在哪些问题之前，有一个页眉和页脚视图中的文件。在标头，我设置的doctype为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

我有其他的文件很多CSS的且有在工作，所以必须有问题。

我赞同所有的想法！

编辑：difrencies

http://shrani.si/f/1T/zp/1oru9l8h/diffrence.png

左边是名单在Firefox和右边是即PRINTSCREEN。

我刚安装了IE9，它的钢不工作看起来是一样IE7 ...

来源

2013-01-03 gabrjan

“IE除外”有点过于笼统。请指定您使用的是哪个版本的Internet Explorer。此外，显示差异的截图可能会有所帮助。 – Zeta

你尝试添加显示：内联和浮点：左标签标签？ – Toping

你没有提到IE的版本。它可能在IE8和更高版本上工作，但不会在IE6和IE7上工作，因为CSS与它们不兼容。 – mukund

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">触发怪癖模式的浏览器。这使得它们与标准和其他模型在旧版浏览器中模拟错误时不一致。

正确的文档类型使用的HTML 4.01过渡是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

一旦有了这种到位，确保你的HTML和CSS都valid。

document.getElementById("tab4").setAttribute("class", "selected");

setAttribute在老版本的Internet Explorer被打破。躲开它。由于您已经在使用jQuery，我推荐使用它的addClass方法。或者直接设置className属性。

来源

2013-01-03 12:02:46 Quentin

感谢ü非常感谢！问题在于文档类型！ – gabrjan

为什么我的CSS不在Internet Explorer中工作

回答

相关问题