IE7中的HTML布局问题

Question

IE7中的HTML布局问题

6

我有一些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中所示： Internet Explorer 9 render of page 而在ie7中是这样的： Internet Explorer 7 render of page 我的两个问题是：

为什么在ie7中文字不能显示在左侧？
为什么在ie7中，#titlebar div中的三个标签不能像在ie9中一样并排显示？

- Vap0r

2

+1 非常清晰明了的问题，如果您能在 jsFiddle.net 上模拟它，那就更好了。 - Mo Valipour

1

你使用的是哪个DOCTYPE？你的IE9版本是否处于兼容模式？ - Ash Burlaczenko

1

未来参考，IE9（我认为IE7也是）具有开发人员工具，允许您查看浏览器如何查看页面。您应该能够按F12将其带出。这可以帮助您可视化其中一个行为与另一个不同的原因。 - Shauna

@Vap0r：你检查了我给你的答案吗？ - Ahsan Rathod

IE9不像IE8那样工作，而IE8又不像IE7，IE7也不像IE6，而且它们都不像任何其他更现代的浏览器。 - Rob

显示剩余4条评论

3个回答

0

为什么#titlebar div中的三个标签在ie7中不能像在ie9中一样并排显示？您需要给它们一个宽度：例如 #titlebar span { width:33%; float:left; }

您需要在头部为ie7+ ie8制作新的样式表。它们呈现的方式不同，不是所有的东西都被支持。

<!--[if lt IE 9]>

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

<![endif]-->

- Kimtho6

给它们设置宽度没有起作用，虽然它们具有了宽度，但是它们没有对齐。还是谢谢。 - Vap0r

0

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;
}

- user188654

当你在Fiddle中运行它时，#left当然是空的，你不会得到JSON响应... - Kimtho6

那么你应该提供jQuery获取并显示其中的代码。如果您将任何代码放在#left中，它将正确显示，但是如果您使用jQuery请求获取某些内容以破坏布局，则无法确定原因，除非共享响应内容。很明显，响应本身有罪使容器消失。 - user188654

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahsan Rathod · Accepted Answer

使用 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;
}

编辑：回答已更新