Question

所以我正在使用codeigniter框架构建一个网页，我有一个简单的页面，其中我使用了一些CSS。除了IE 7（以及IE的其他版本，我还没有检查过），我在所有浏览器中都不能正常工作。

问题是我正在尝试显示标签并启用它看起来像是在点击时选中的。

我的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;
}

在我的ie中存在相当多的问题，列表没有显示内联在hower上根本不起作用，当我选择一个项目时没有任何反应。这是我的档案：

    <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，并且有工作，所以一定有问题。

我赞成所有想法！

编辑：打印不同的屏幕

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

左边是firefox中的列表，右边是ie。

我刚刚安装了IE9，它的钢材不起作用，外观与IE7相同......

Answer 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">在浏览器中触发Quirks模式。这使得它们与标准相互矛盾，因为它们模拟旧版浏览器中的错误。

用于HTML 4.01 Transitional的正确Doctype是：

<!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");

旧版Internet Explorer中的

setAttribute已损坏。躲开它。由于您已经在使用jQuery，我建议使用其addClass方法。或者直接设置className属性。

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

1 个答案: