html - chrome和firefox定位不同

Question

我有这样的东西:

html:

<span class="st">sometext >
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</span>

CSS:

.st{
    position:relative;
}


.st:hover ul{
    transition: opacity 1s;
    opacity:1;  
}

.st ul{
    margin:0;
    padding-left:5%;
    opacity:0;
    position:absolute;
    width:8em;
    top:0;
    left:100%;
    list-style: none outside none;
}

.st ul li{
    display:inline-block;
    margin:0;
    padding:0;

}

fiddle

--> 将鼠标悬停在 someText 上时会显示列表(一些带有链接的图像，但在此处简化为字母)。在 Firefox 中它显示在 someText > 旁边(这是期望的结果)，但在 Chrome 中它看起来更靠右。

我最初的猜测是(因为 ul 嵌套在 span 中)span 的宽度计算方式不同，firefox 忽略不透明度 0 列表来计算 span 的宽度，而 chrome 使用它。但是在删除不透明度规则并使用 display: none/block 隐藏和显示 ul 时，我遇到了同样的问题。
(注意:我说的是 chrome，但实际上我在 Ubuntu 上使用的是 Chromium 31.0.1650.63，以防万一)--> 知道是什么原因造成的吗？我该如何解决这个问题？

Answer 1

那么.. 为什么 .st ul 有 padding-left:5%;？因为这似乎是造成它的原因。

此外，您将 block 内容 (ul) 放置在 inline 元素 (span) 中，所以另一个有理由不对不同的(即未定义)行为感到惊讶。