IE7中的HTML布局问题答案

【问题标题】：HTML layout problem in IE7IE7中的HTML布局问题
【发布时间】：2011-08-05 21:34:26
【问题描述】：

我有一些 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 的左侧没有显示文字？
为什么#titlebar div 中的三个<span> 标签在ie7 中不像在ie9 中那样并排显示？

【问题讨论】：

+1 很好的清晰和干净的问题，如果你在 jsFiddle.net 中模拟它会更好
您使用的是什么 DOCTYPE？您的 IE9 版本是否处于兼容模式？
未来参考，IE9（我认为是 IE7）拥有开发者工具，可以让您以浏览器看到的方式查看页面。您应该能够按 F12 将其调出。这可以帮助您了解为什么其中一个的行为与另一个不同。
@valipour：我正在考虑它，但我正在编写这个 Microsoft Sharepoint，它使用默认 doctype 做了一些奇怪的事情，我不希望它呈现任何不同的方式。
@Ash：它不在兼容模式下，并且 IE9 按预期运行，是 ie7 导致了问题。

标签： jquery html css layout internet-explorer-7

【解决方案1】：

使用float:left 作为日期、作者和标题span 像这样

#titlebar span {
    float:left;
}

对于文本对齐使用此代码还添加宽度：

#date {
    text-align: left;
    width: 33%;
}
#title{
    text-align: center;
    width: 34%;
}
#author{
    text-align: right;
    width: 33%;
}

查看 IE7 中的演示并更新链接：http://jsfiddle.net/rathoreahsan/Jy7Sz/

已编辑：

用上面的代码替换这个代码：

#date{
  float: left;
}

#title{
  clear: both;
}

#author{
  float: right;
}

已编辑：答案已更新

【讨论】：

那我怎样才能让日期左对齐，标题居中对齐，作者右对齐？
查看更新后的答案以及您的要求和更新后的链接。
This 是您修复的结果。所以它并没有像它应该的那样工作。
现在可以根据需要对每个跨度使用float:left 和width:33% 进行修复。查看更新的答案。
啊，这实际上几乎是完美的。我将把你标记为答案，但this 是结果。你知道如何将#author 移动到 iframe 的最右边吗？

【解决方案2】：

为什么#titlebar div 中的三个标签在ie7 中不像在ie9 中那样并排显示？你需要给他们一个宽度：喜欢

#标题栏跨度{ 宽度：33%；向左飘浮; }

您需要在标题中为 ie7+ ie8 创建一个新样式表。它们以不同的方式呈现内容，并非所有内容都受支持

<!--[if lt IE 9]>

        <link rel="stylesheet" href="/css/ie-fixes.css">

<![endif]-->

【讨论】：

给他们一个宽度不起作用，它给了他们宽度，但他们没有排成一行。不过还是谢谢。

【解决方案3】：

1) 没有显示任何内容，因为您的 #left 容器内没有任何内容。

<body>
    <h1 id="header"></h1>
    <div id="container">
      <div id="left">
          <!-- Insert content here. -->
      </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>

2) 所有没有明确宽度的 div 占用 100% 的宽度空间。

#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;
    width: 30%;
}
#title {
    float: left;
    width: 40%;    
}
#author {
    float: right;
    width: 30%;   
}
#memo{
  width: 100%;
  min-height: 500px;
}

【讨论】：

当然，#left 是 emthy，当你在小提琴中运行它时，你不会得到 json 响应......
那么您应该已经给出了 jQuery 获取并在其中显示的代码。如果您将任何代码放在#left 中，它将正确显示，但是如果您使用 jQuery 请求获取破坏布局的内容，则如果不共享响应内容，就无法判断原因。很明显，响应本身对使容器消失是有罪的。