Question

我有一个项目列表，我将它们组合在一起以滚动屏幕滚动。

除了一个元素padding之外，我所有的浏览器都可以使用所有浏览器。

你可以在这个小提琴中看到12px左边的填充只能在IE中使用，而不能在任何其他浏览器中使用。

我已经尝试弄乱我能想到的所有东西，让它在Chrome / Firefox / Safari中运行无济于事。

有什么想法吗？感谢。

<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;
}

Answer 1

汤姆，我猜你真正想要达到的目标是对子弹和李的文本之间的空间进行一些控制。如果是这样，您最一致的跨浏览器解决方案将是这样的：

#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值，而不仅仅是引号中的子弹。更多信息：how to reduce default gap between bullet and text in <li>?。

CSS填充列出仅在IE 10中应用的项目

1 个答案: