Блог

Я пытаюсь сделать так, чтобы div внизу плавал вправо и отображался внизу его родительского элемента. Эта разметка работает для всех моих браузеров, за исключением случаев, когда я перевожу IE9 в режим браузера: стандарты IE9 и Document Mode IE7 (который мне нужно использовать).)

По какой-то причине с этими настройками серая рамка вокруг test в div простирается полностью влево от родительского div, когда мне нужно, чтобы она просто обводила текст, как это делается в FF или Chrome. Кстати, я ненавижу IE7 за это дерьмо. Разметка полностью логична и должна работать, но IE7 просто должен быть рывком.

  <div style="width: 200px;">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: relative; height:15px; bottom: 19px; left: -2px; float:right;">
        <div style="height: 15px; float: right;">
            Text in div</div>
    </div>
</div>
  

Вы могли бы переключиться на использование position: relative / position: absolute :

http://jsfiddle.net/5fdcV/

 <div style="width: 200px; position: relative">
    <div style=" height: 400px; border: 1px solid #000000;">
    </div>
    <div style="border: 1px solid #c0c0c0; position: absolute; height:15px; bottom: 2px; right: 2px;">
        <div style="height: 15px;">
            Text in div</div>
    </div>
</div>
  

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