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

- ＆GT;当鼠标悬停在someText上时，列表（一些带链接的图像，但简化为字母）显示出来。在Firefox中，它显示在someText＆gt;旁边。（这是期望的结果），在Chrome中，它显得更加正确。

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

Answer 1

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

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）中，这是另一个不要惊讶的原因不同的（即 undefined ）行为。

Answer 3

我从未成为列表元素的忠实粉丝。它们似乎在所有浏览器中的行为略有不同，包括它们的默认边距和填充。

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

您也可以使用＆amp; GT;而不是＆gt;因为它是一个特殊的html标签，可能会破坏代码（虽然这些天浏览器足够聪明）。

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

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

</span>

不同的定位chrome和firefox

3 个答案: