我有一些HTML:
<body>
<h1 id="header"></h1>
<div id="container">
<div id="left">
</div>
<div id="content">
<div id="titlebar">
<span id="date">Novermber 13, 3414</span>
<span id="title"> The importance of being earnest.</span>
<span id="author">HG Wellwhocares</span>
</div>
<iframe id="memo" />
<div id="attachments"></div>
<p id="description"></p>
<div id="action">
<div id="accept">Accept</div>
<div id="revise">Revise</div>
</div>
</div>
</div>
</body>
还有一些CSS:
#container{
width: 85%;
margin: 0 auto;
background: gray;
}
#left{
float: left;
width: 20%;
padding: 1%;
}
#left:after{
clear: both;
}
#content{
margin-left: 22%;
background: silver;
padding: 3em;
}
#titlebar{
text-align: center;
}
#date{
float: left;
}
#title{
clear: both;
}
#author{
float: right;
}
#memo{
width: 100%;
min-height: 500px;
}
还有这个jQuery:
months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$(document).ready(function(){
items = new Array();
$.getJSON('_vti_bin/listdata.svc/BOTMemos?$orderby=MeetingDate', function(data){
date = "";
$.each(data.d.results, function(index, value){
if(value.MeetingDate!=null){
if(value.MeetingDate!=date){
if(date!=""){
$('#left').append('<hr />');
}
item = new Array(value.MeetingDate, value.Title0, value.Checkers);
date = value.MeetingDate;
month = months[parseInt(date.substring(5,7), 10)-1];
formattedDate = month + " " + date.substring(8,10) + ", " + date.substring(0, 4);
$('#left').append('<h1>'+formattedDate+'</h1>');
}
$('#left').append('<h2 class="memo">'+value.Title0+'</h2>');
}
});
});
});
这会导致两种不同的页面布局,如ie9中所示:
而在ie7中是这样的:
我的两个问题是:
- 为什么在ie7中文字不能显示在左侧?
- 为什么在ie7中,#titlebar div中的三个标签不能像在ie9中一样并排显示?