WebKit浏览器 - 无序列表 - 额外空间

Question

我在WebKit浏览器中遇到了无序列表的问题.这段代码被注入到我不拥有的页面中,所以我无法真正使用CSS重置,但我无法弄清楚是什么导致了我的问题.

<div class='instruct'>
    <ul>For best results please make sure:
        <li>Your entire face including your eyebrows and chin are visible in the frame</li>
        <li>Your face is well lit but please avoid excessive backlighting</li>
    </ul>
</div>

CSS:

.instruct {
    display: inline;
    font-size:14px;
    text-align:center;
    padding-top: 10px;
    padding:0px;
    margin: 0px;
}

.instruct ul {
    position: relative;
    left: 30px;
    width: 320px;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
   list-style: none;
}
.instruct ul li {
    font-weight: normal;
    text-align: left;
    text-indent: 0px;
    padding: 0px;
    padding-top: 10px;
    margin: 0px;
}

我目前在IE/FF中获得的结果是所有列表项都在UL内容框的最左侧正确对齐.但是,在Chrome和Safari中,UL内容框的左侧与每个LI内容框之间的空间大约为20px.

在Chrome的开发者控制台中检查元素时,突出显示效果的框显然距离UL左侧的左侧约20个像素.这就像有20个像素的填充或边缘来自某处.

鉴于UL和LI的填充和边距均为零,我无法弄清楚这一点.

任何想法,将不胜感激.

编辑:你可以在这里看到它的截图:

Answer 1

对不起... necro-thread ..但它喜欢在谷歌上搜索主题.

您的内联块(或内联)在列表项上默认生成额外的4px空间.转到UL标记并添加字体大小:0

问题解决了.

Answer 2

尝试 {-webkit-margin-before:0; -webkit-margin-after：0；-webkit 边距开始：0；-webkit 边距结束：0；-webkit-padding-start:0}如果不起作用，请查看http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css