При использовании Chrome / Safari позиционируется img не двигается - PullRequest
Новая
       2

При использовании Chrome / Safari позиционируется img не двигается

1 голос
/ 20 июня 2011

У меня есть абсолютная позиция img (я хочу правильно обосновать это в li).Я использую абсолютное позиционирование.Этот метод отлично работает в IE8 и FF3.6, но не так, как хотелось бы в Safari и Chrome.В последующем, img остается исправленным, когда div свернут.

Я составил небольшой скрипт для демонстрации своей проблемы: 

<html>
  <head>
    <script>

      function hide()
      {
        var el = document.getElementById('collapsable');
        //el.style.visibility = "hidden";
        el.style.display = "none";

      }  // hide

      function show()
      {
        var el = document.getElementById('collapsable');
        //el.style.visibility = "visible";
        el.style.display = "inline";

      }  // show
    </script>
  </head>
  <body>
    <input type="button" value="Collapse" onClick='hide();' >
    <input type="button" value="Expand" onClick='show();' >
     <div id="collapsable" >
      <div>The quick fox jumped over the lazy brown dog</div>
      <div>The quick fox jumped over the lazy brown dog</div>
      <div>The quick fox jumped over the lazy brown dog</div>
    </div>
    <ul>
      <li style="width:200">Item 1<span>< img src="favicon.ico" style="position:absolute; right=5px;" ></span></li>
      <li style="width:200">Item Two</li>
      <li style="width:200">Third Item</li>
    </ul>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 21 июня 2011

Добавить стиль position: relative к элементу обертки изображения.Возможно, вы захотите добавить этот стиль к родителю <li>.

например, 

<li style="width:200; position: relative;"">Item 1
    <span>
        <img src="favicon.ico" style="position:absolute; right: 5px;" />
    </span>
</li>

Обратите внимание, что вы исправили right=5px; в right: 5px;

0 голосов
/ 21 июня 2011

изменить right=5px на right:5px.

EDIT извините .. укажите позицию: относительно li, содержащего область изображения

...