不同的定位铬和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;

}

小提琴

->将鼠标悬停在someText上时，将显示列表（一些带有链接的图像，但此处简化为字母）。 在firefox中，它显示在someText>旁边（这是所需的结果），而在Chrome中，它显示得更远。

我最初的猜测是（由于ul嵌套在跨度中），跨度的宽度以不同的方式计算，因此Firefox忽略了用于计算跨度宽度的不透明度0列表，而chrome使用了该列表。 但是，在删除不透明度规则并使用display时，我有相同的问题：none / block用于隐藏和显示ul。
（注意：我说的是chrome，但实际上是在Ubuntu上使用Chromium 31.0.1650.63，以防万一。）->知道是什么原因造成的吗？ 我该如何解决呢？

Answer 1

嗯，我认为您必须重置浏览器的默认设置。
尝试使用normalize.css或简单的CSS重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Answer 2

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

另外，您还将块填充（ ul ）放置在内联元素（ span ）内，因此还有另一个理由不要因其不同的行为（即未定义的行为）而感到惊讶。

Answer 3

我从来都不是列表元素的忠实拥护者。 它们在所有浏览器中的行为似乎略有不同，包括它们的默认边距和填充。

为什么不使用简单的div元素呢？ 您可以用它做任何您想做的事。

<您可能还想使用＆gt; 而不是>，因为它是一个特殊的html标记，并且可能会破坏代码（尽管现在浏览器足够聪明）。

http://jsfiddle.net/qLuw2/9/

<span class="st">sometext &gt;
<div class="hoverable">
    a <br />
    b <br />
    c
</div>

</span>