Question

我一直在关注this guide，以便在我的网络应用程序上创建标签。我使用的是与此示例完全相同的代码和css，因此您可以将其用作参考。

正如在上一段中所述，似乎存在IE的复杂性问题。虽然一切都在IE浏览器中运行，但布局看起来非常糟糕。

如果我添加了那里提到的decleration：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">或<!DOCTYPE html>标签在IE和Firefox中正确呈现，但容器似乎正在削减中间页面的内容。

我尝试使用css中的容器元素，但似乎没有任何帮助。

任何想法......？

Answer 1

该doctype不正确并使您进入怪癖模式。使用这个：<!DOCTYPE html>

Answer 2

我个人会用javascript / jquery来做同样的事情。我已经包含了一些我今天正在使用的工作样本。

在导航栏中，为标签添加div。例如

<div id="home">Home</div>
<div id="about">About</div>

在菜单栏下方的内容div中。

<div id="content-holder">
    <div id="content1"></div>
    <div id="content2"></div>
</div>

这两个标签div的css。

#home
{
    padding:4px 10px 4px 15px;
    cursor:pointer;         
}
#about

    padding:4px 10px 4px 15px;
    cursor:pointer;                         
}

和javascript / jquery来控制转换。

var homeUrl = "link to content 1"
var aboutUrl = "link to content 2"
$("#home").click(function() {
$("#content-holder").load(homeUrl);         
});
$("#about").click(function() {
$("#content-holder").load(aboutUrl);        
});

Answer 3

如果您使用的是iframe，则iframe需要足够大以容纳所有内容，或者使用滚动条。 iframe高度设置为内联，而不是css。

选项卡与IE的兼容性问题

3 个答案: