0

我有一个项目列表，我将它们放在一起以在股票行情中滚动屏幕。

除了一个元素填充之外，我的所有 CSS 都可以在所有浏览器中使用。

您可以在这个小提琴中看到 12px 的填充左侧仅适用于 IE，不适用于任何其他浏览器。

我试图搞乱我能想到的一切，让它在 Chrome/Firefox/Safari 中工作，但无济于事。

有任何想法吗？谢谢。

http://jsfiddle.net/Gmvmc/3/

<div class="exchange-rates">
Exchange rates $ 1 USD:
<a href="http://finance.yahoo.com/currency-converter/" target="_blank">
    <div id="scrollerWrapper">
        <ul id="scroller">
            <li id="USDJPY">TEST</li>
            <li id="USDAUD">TEST</li>
            <li id="USDEUR">TEST</li>
            <li id="USDGBP">TEST</li>
            <li id="USDCHF">TEST</li>
            <li id="USDCAD">TEST</li>
            <li id="USDSEK">TEST</li>
            <li id="USDNOK">TEST</li>
        </ul>
    </div>
</a>


.exchange-rates
{
background:#eeeeff;
padding:10px 19px 10px 59px;
border:1px solid #222266;
color:#222266;
font-size:1.1em;
border-radius:9px;
margin:0 0 0 0;
}
#scrollerWrapper
{
height:25px;
overflow:hidden;
width:70%;
float:right;
}
#scroller
{
height:100%;
margin:0;
padding:0;
position:relative;
color:#222266;
}
#scroller li
{
float:left;
padding:0 0 0 12px;
list-style-position:inside;
}
4

1 回答 1

3

汤姆，我猜你在这里真正想要实现的是对项目符号和 LI 文本之间的空间的一些控制。如果是这样，您最一致的跨浏览器解决方案将是这样的：

#scroller li
{
float:left;
padding:0 0 0 12px;
list-style-position:inside;
    list-style: none;
}
#scroller li:before
{
    content: "\2022";
    margin-right: 10px;/* space between bullet and text */
}

强烈建议对项目符号使用 ISO 值，而不仅仅是引号中的项目符号。更多内容：如何减少 <li> 中项目符号和文本之间的默认间隙？.

于 2013-09-09T14:10:33.437 回答