Невозможно заставить float работать влево / вправо для div в Internet Explorer

StackOverflow https://stackoverflow.com/questions/1443007

Вопрос

Вот HTML: 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

и styles.css: 

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

Это отлично работает в FF и Chrome. Это должны быть две колонки: одна с текстом, другая с иконкой и небольшим количеством текста. Как я могу заставить это работать в IE? Я попробовал div clear = обе вещи, и это ничего не делает.

Также приветствую тех, кто может дать мне несколько советов о том, как писать страницы и использовать стили, которые работают в FF, Chrome и IE > = 7.

Это было полезно?

Решение

может быть потому, что вы не определяете тип документа, а IE просматривает вашу страницу в режиме Quirksmode как приложение в режиме стандартов (или почти стандартном).

Прочтите эту статью, чтобы узнать больше:

http://www.quirksmode.org/css/quirksmode.html

Я проверил ваш сайт в стандартном режиме и в IE7 столбец 2 ведет себя так, как должен (как в FF & amp; Chrome)

Другие советы

Я могу предложить несколько вещей, хотя я не уверен, что поможет, если действительно что-то из них будет:

<Ол>
  • Поместите DOCTYPE (например, переходный HTML 4.01) в ваш документ. Это заставляет IE в так называемую & Quot; совместимую со стандартами & Quot; режим, а не эвфемистический " quirks " Режим;
  • Не используйте левый и правый классы таким образом. Это заставляет вас использовать дочерний селектор, который является только IE7 +, и в этом нет необходимости;
  • Если ваш div не содержит ничего, кроме float, он будет иметь нулевую высоту. Вы можете решить эту проблему, поместив под ними высоту 0 с помощью & Quot; clear: both & Quot; на него или " переполнение: скрыто " на родителя;
  • Избавьтесь от align = " center " ;. Это не стандартно.

    • Вот скелет, который стоит рассмотреть: 

    <div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

    в сочетании с: 

    html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

    и т. д.

    Сначала я пропустил все 

    div#main-header-content > div.left

    и заменить на 

    div#main-header-content div.left

    так как они не работают в IE6.

    Во-вторых, я бы использовал 

    div.right {
    float: left;
}

    И, кроме того, я бы определенно пропустил <div align="center">...</div>, так как это устарело. Вместо этого я бы переставил div.content в 

    div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

    Хитрость к центру состоит в том, чтобы (используя position: относительный или position: absolute) установить левую точку равной половине ширины, а затем переместить поле обратно на половину ширины элемента (где «element» - это элемент Вы хотите, чтобы в центре).

    модифицированная CSS 

    div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

    Вместо ur css для этих классов вы можете попробовать это в IE и Firefox тоже.

    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top