使用 Chrome/Safari 时，定位的 img 不会移动

发布于 2024-11-16 11:12:04 字数 1360 浏览 0 评论 0原文

我有一个绝对位置 img （我想在 li 中右对齐）。我正在使用绝对定位。此方法在 IE8 和 FF3.6 中运行良好，但在 Safari 和 Chrome 中效果不佳。在后者中，当 div 折叠时，img 保持固定。

我编写了一个小脚本来演示我的问题：

<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>

原文

I have an absolute position img (I want to right justify it in the li). I am using absolute positioning. This method works fine in IE8 and FF3.6 but not as I would like in Safari and Chrome. In the later, the img remains fixed when the div is collapsed.

I have made up a little script to demonstrate my issue:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不忘初心 2024-11-23 11:12:04

将样式 position:relative 添加到图像的包装元素。
您可能希望将此样式添加到父

中。

例如，

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

请注意，我已将您的 right=5px; 更正为 right: 5px;

Add style position: relative to a wrapper element of the image.
You would probably want to add this style to the parent <li>.

e.g.

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

Notice I have corrected your right=5px; to right: 5px;

回复收藏 0 原文