Question

我有一个包装器，然后是ul，然后是带有填充的li并且左浮动。

在Mac Firefox和Safari中，最后一个<li>孩子移动到下一行。

我正在使用保证金自动和重置。它在每台浏览器中都可以在PC上呈现（不是IE9，但我有条件样式表，不包括在内）。

以下是代码：

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, font, 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 {
    margin: 0; 
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    list-style: none;

}
#wrapper {
    margin: 0 auto;
    width: 960px;
    padding: 0;
}
ul {
    list-style: none;
    font-size: 13px;
    font-weight: normal;
    background-color: #fff;
    width: 960px;
    font-family: Arial, Helvetica, sans-serif;
    height: 36px;
    margin: 0;
}
li {
    float: left;
    padding: 10px 20px 10px 20px;
    background-color: #e7e2d7;
    color: #4a4a4a;
    margin: 0;
}
li.selected {
    color: #fff;
    background-color: #218308;
    background-image: url(../ui/nav-selected-arrow.png);
    background-repeat: no-repeat;
    background-position: center top;
}
li a {
    color: #4a4a4a; 
}
li a:hover {
    text-decoration: underline;
}
li.selected a {
    color: #fff;    
}
</style>
<body>
<div id="wrapper">
    <ul>
        <li class="selected"><a>Becket Court</a></li>
        <li><a>Darwin College</a></li>
        <li><a>Eliot College</a></li>
        <li><a>Keynes College</a></li>
        <li><a>Park Wood</a></li>
        <li><a>Rutherford College</a></li>
        <li><a>Tyler Court</a></li>
        <li><a>Woolf College</a></li>
    </ul>
</div>

是否有理由在Mac上对填充进行不同的解释？或者我只是犯了一个愚蠢的错误？

Answer 1

我猜想在Mac和PC上填充实际上是完全相同的，但字体呈现的略有不同，导致Mac上某些<li>的宽度更大，导致最后一个项目包装到下一行。

您可以在Mac和PC上使用Firefox的Firebug插件或Google Chrome的内置检查器进行检查。

为什么<li>在Mac上解释填充不同？ </LI>

1 个答案: