我有一个绝对位置 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>
最佳答案
添加样式 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;
关于html - 使用 Chrome/Safari 时定位的 img 不会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6416266/