我正在编写一个网页，左侧有一个垂直菜单栏，右侧有一个主要内容 Pane 。我使用 CSS floats 来完成此操作，但是当调整页面大小时，内容可能会“被推到”菜单下。为了纠正这个问题，我使用 jQuery 来动态调整内容 Pane 的大小，它似乎在 FF3、Chrome 5 和 IE8 中运行良好。但是当我在 IE6 中测试时，浏览器似乎陷入了某种无限大小调整循环。我不知道为什么。
我最终使用浏览器嗅探来解决这个问题，但我知道这不是一种特别可靠的技术。有什么方法可以纠正 IE6 的行为吗？如果不是，是否有比浏览器嗅探更好的检测方法？最后，我是否通过将 JavaScript 混入其中来过度思考这个问题？我能否创建一个仅使用 CSS 调整大小时看起来不错的 2 栏网页？
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>IE 6 Resize Madness</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" >
<link rel="stylesheet" type="text/css" href="home.css" >
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="home.js"></script>
</head>
<body>
<h1><span id="id_title">IE 6 Resize Madness</span></h1>
<div id="sidebar">
<ul id="main-nav">
<li>
<a href='#'>Nav Link 1</a>
</li>
<li>
<a href='#'>Nav Link 2</a>
</li>
<li>
<a href='#'>Nav Link 3</a>
</li>
<li>
<a href='#'>Nav Link 4</a>
</li>
</ul>
</div>
<div id="content">
<p class="first">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
</div>
</body>
</html>
样式表
html {
height: 100%;
background-color: Teal;
}
body {
background-color: Teal;
margin-left: 0;
padding-left: 0;
margin-right: 0;
padding-right: 0;
}
h1 {
text-align: center;
margin-bottom: 0.5em;
}
a {
font-family: Verdana, sans-serif;
color: silver;
}
a:hover {
color: white;
}
/* Navigation menu. */
ul#main-nav {
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
width:10em;
/*width: 100%;*/
}
ul#main-nav li {
margin:0;
padding:0;
list-style:none;
margin:0 0 0.3em 0;
}
ul#main-nav li a {
text-decoration:none;
display:block;
padding:0.3em 0.5em;
border:2px solid indigo;
color:#003;
background:#fff;
}
ul#main-nav li a:hover {
border:2px solid black;
color:#000;
background:#efefef
}
#sidebar {
/*width: 10%;*/
width: 12em;
margin-left: 0;
padding-left: 0.75em;
margin-right: 2em;
padding-right: 0;
float: left;
clear: left;
background-color: Teal;
}
#content {
font-family:helvetica,arial,sans-serif;
font-size: 1.2em;
width: 75%;
margin-top: 0;
padding-top: 0;
margin-left: 0;
padding-left: 0;
margin-right: 2em;
padding-right: 0.5em;
float: right;
clear: right;
background-color: teal;
}
p {
padding-left: 0.5em;
margin-left: 0.5em;
}
.first {
margin-top: 0;
padding-top: 0;
}
JavaScript
$(document).ready(function(){
//Fade in the paragraphs.
$("#content p").hide();
$(document).click(function(){
$("#content p").show();
})
;
$("#content p.first").fadeIn("slow", fade_in_next_paragraph);
//Set content width.
set_content_width();
//IE6 goes crazy with resize events!
//I hate having to do browser detection, but I am not sure what
//feature support I need to test.
//IE8 in standards mode doesn't go into infinite recursion, but it
//treats the right content pane as a static size and adds scroll bars
//if the user tries to resize the window.
//FF and Chrome seem to resize just fine. Not sure which
//behavior is correct.
if($.browser.msie && parseFloat($.browser.version) < 8.0) return;
$(window).resize(set_content_width);
})
;
function set_content_width()
{
var body_width = $("body").width();
var sidebar_width = $("#sidebar").outerWidth(true);
var jq_content = $("#content");
var content_width = jq_content.width();
var delta = jq_content.outerWidth(true) - content_width;
jq_content.width(body_width - sidebar_width - delta);
}
function fade_in_next_paragraph()
{
var jqobj = $(this).next("p");
if(jqobj.length > 0)
{
jqobj.delay(3000).fadeIn("slow", fade_in_next_paragraph);
}
}
最佳答案
什么时候 ie6 用户值得浏览一个漂亮的网页？ Ie6 快 10 岁了!
现在你的布局，试试这个:
#sidebar {
float:left;
width:12em
}
#content {
margin-left:12em
}
关于javascript - 使用 JQuery 动态调整 2 列 HTML 页面的大小会导致 IE6.5 上的无限循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3220558/