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

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

1 голос
/ 18 сентября 2009

Вот 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.

Ответы [ 4 ]

3 голосов
/ 18 сентября 2009

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

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

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

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

2 голосов
/ 18 сентября 2009

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

  1. Поместите DOCTYPE (например, переходный HTML 4.01) в ваш документ. Это заставляет IE переходить в так называемый «соответствующий стандартам» режим, а не в эвфемистический режим «причуд»;
  2. Не используйте левый и правый классы таким образом. Это заставляет вас использовать дочерний селектор, который является только IE7 +, и в этом нет необходимости;
  3. Если ваш div не содержит ничего, кроме float, он будет иметь нулевую высоту. Вы можете решить эту проблему, поместив под ними высоту 0 с надписью «clear: both» или «overflow: hidden» на родительском элементе;
  4. Избавьтесь от 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; }

и т. Д.

1 голос
/ 18 сентября 2009

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

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» - это элемент Вы хотите центрироваться).

0 голосов
/ 18 сентября 2009

модифицированный 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;
    }

Вместо ур для этих классов, попробуйте, это прекрасно работает и в IE, и в Firefox ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...