Проблема с версткой HTML в IE7 - PullRequest
Новая
       34

Проблема с версткой HTML в IE7

7 голосов
/ 05 августа 2011

У меня есть 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 Мои два вопроса:

  1. Почему текст не отображается слева в ie7?
  2. Почему три тега <span> в #titlebar div не отображаются рядом в ie7, как в ie9?

Ответы [ 3 ]

2 голосов
/ 05 августа 2011

Используйте 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;
}

РЕДАКТИРОВАНИЕ: Ответ обновлен

0 голосов
/ 05 августа 2011

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;
}
0 голосов
/ 05 августа 2011

  1. Почему три тега в div #titlebar не отображаются рядом в ie7, как в ie9?Вам нужно задать им ширину: как

    # заголовок пролета {ширина: 33%;плыть налево;}

Вам нужно создать новую таблицу стилей для ie7 + ie8 в своем заголовке.Они отрисовывают вещи по-разному, и не все поддерживается 

<!--[if lt IE 9]>

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

<![endif]-->
...