Chrome中有趣的HTML行为

Question

我有以下DOM结构：

<li>
    <div id="some_id_1">-some html-</div>
</li>

<li>将图片作为背景，<div>在<li>的右上角显示为控件框。

<div>向右浮动，应显示在右侧。

当我刷新页面时（在Chrome中），<div>显示在<li>的中间附近（如左图所示）。

当我打开Chrome的开发者工具，并更改<div>的不透明度（或任何其他css属性）时，它会向右移动（如右图所示）。

我尝试清除Chrome的缓存，但它无效。

可能导致此问题的任何特定于Chrome的问题？ （该页面在Firefox中运行良好。）

CSS：

li {
 position:relative;
}
div {
 position:absolute;
 width:40px;
 float:right;
 margin:0px;
}

（所有其他属性与字体/颜色相关）

更新：margin-right：0px似乎已经修复了问题，但我仍然感到困惑，为什么更改不透明度会移动div。

Answer 1

你试过margin-right:0px;

吗？

如果您使用的是float:right;，请尝试：clear:both; 你的CSS是什么？很难以这种方式帮助你。

Answer 2

如果您使用position:absolute放置div，请确保li有position:relative

li{
    list-style:none;
    position:relative;
    display:inline-block;

}
div{
    position:absolute;
    right:0;
    width:40px;
    background:#333; 
    color:white;
    border-radius:4px
}

<强> DEMO