Почему вложенные Div выходят из родительского в IE - PullRequest
Новая
       23

Почему вложенные Div выходят из родительского в IE

0 голосов
/ 30 июля 2011

Извините, у меня нет точного кода со мной, но, надеюсь, это работает с примером, который я привожу.

Почему в IE некоторые вложенные элементы div появляются и сидят не в том месте?(например, 200px вниз от того места, где оно должно быть). 

<div style="width:1024px;height:103px;background-color:green;">
    <div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
    </div>
    <div style="float:right;width:180px;height:103px;">
    </div>
</div>

Кто-нибудь понимает, что я имею в виду?Я почти уверен, что это не имеет ничего общего с двойными полями.Должен ли я по-прежнему делать веб-сайт совместимым с IE7 и 6?

Я пытаюсь научиться HTML надлежащим образом.Я хочу быть в состоянии гарантировать, что мой код всегда совместим со всеми браузерами и доступен для инвалидов.Есть ли где-то, что вы бы порекомендовали мне изучить "правильные" практики?Я понимаю большинство HTML, но совместимость может иметь проблемы.

Ответы [ 2 ]

1 голос
/ 30 июля 2011

Работает ли так же в современном браузере? Родительские элементы никогда не должны расширяться, чтобы содержать плавающие элементы. Чтобы сделать то, что вы хотите, вам нужно либо переместить родительский объект, либо присвоить ему CSS-свойство overflow: auto. Но установка высоты родительского div в 103px все равно будет ограничивать вещи.

0 голосов
/ 30 июля 2011

Ваша проблема с IE, скорее всего, связана с тем, что элемент float: right появляется после его родных элементов.(см. пункт 3 ниже).

Говоря о том, как выучить лучшие практики HTML и CSS, я бы порекомендовал поиграть с CSS Zen garden , чтобы увидеть, как различные удивительные дизайны создаются с использованием "static "html.

Глядя на HTML, я вижу следующие проблемы:

  1. Задавать статическую ширину и высоту не очень хорошая идея
  2. float, правый элемент должен появляться раньшелюбой другой брат (в противном случае IE не сможет правильно его отобразить) - (это, скорее всего, проблема).
  3. Наличие float: left для другого элемента не требуется
  4. добавление clear: bothв конце концов все братья и сестры будут гарантировать, что родительский объект будет увеличиваться по высоте (без необходимости указывать высоту)

, поэтому я бы изменил ваш HTML на это: 

<div>
    <div style="float:right;"></div>
    <div><img src="LOGO URL"/></div>
    <div style="clear:both"></div>
</div>
...