1

所以我正在使用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 中存在相当多的问题，当我选择一个项目时，列表没有内联显示，但是根本不起作用。这是我的文件：

    <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 中的相同......

4

1 回答 1

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> triggers Quirks Modes in browsers. This makes them inconsistent with the standards and each other as they emulate bugs in older browsers.

The correct Doctype to use for HTML 4.01 Transitional is:

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

Once you have this in place, make sure that your HTML and CSS are both valid.

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

setAttribute is broken in older versions of Internet Explorer. Avoid it. Since you are already using jQuery I recommend using its addClass method instead. Alternatively set the className property directly.

于 2013-01-03T12:02:46.643 回答