Html 单词间距在safari中不起作用

嗨，我希望有人能帮我解决我在狩猎中遇到的问题。基本上我已经创建了一个

如果你看一下导航栏顶部的菜单，谷歌浏览器、IE浏览器、Firefox和Opera中都有单词和字母间隔。但是，在Safari中打开此网站时，没有单词间距

下面是代码副本，粘贴在底部：

    <nav id="top_menu">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="destination.html">Destinations</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="contact.html">Contact</a></li>
       </ul>
    </nav>

---

您好，如果您不介意使用

字间距的目的是什么：50px

如果想法是在两个

之间留有空格，则对

li

使用

填充，并消除
顶部菜单中的
字间距

#top_menu {
        margin-left:170px;
        letter-spacing:1px;
}

#top_menu li {
    display:inline-block;
    list-style:none;
    padding:5px 15px 5px 0;
    font:bold 14px Tahoma, Geneva, sans-serif;
    position:relative;
    bottom:40px;
}

我知道这不是一个完美的答案，但希望这能帮助您……
只需添加以下内容：


#顶部菜单{
左边距：170px；
字母间距：1px；
字间距：50px；
-webkit字间距：50px；
-moz字母间距：1
-moz字间距：50px；
-webkit字母间距：1
#上菜单{
显示：内联块；
列表样式：无；
填充物：5px；
字体：粗体14px塔荷马，日内瓦，无衬线；
位置：相对位置；
底部：40px；
}
#顶部菜单LIA{
边框底部：无；
}
#顶部菜单a{
颜色：#FFF；
文字装饰：无；
边框底部：1px实心#7ac000；
垫底：2件；
}
#顶部菜单a：悬停{
颜色：#ff5400；
文字装饰：无；
边框底部：1px实心#ff5400；
垫底：2件；
}
#顶部菜单a:活动{
颜色：#ff5400；
文字装饰：无；
边框底部：1px实心#ff5400；
垫底：2件；
位置：相对；顶部：1px；
}








大家好，谢谢你们的回答。我决定放弃以前的导航栏，在Photoshop中设计了一个导航栏，并导入到Dreamweaver中。不过，感谢Jhunlio，至少下次我知道如何使用填充而不是使用单词间距。下面是一个需要单词间距的示例：我们使用内联块和文本对齐：JUtify.我们仍然不希望合并列表项，我们希望至少有50px的间距。添加填充将破坏验证。即使是最旧的IE和Firefox也支持字间距，但在这种情况下，Chrome和Safari不支持。
#top_menu {
        margin-left:170px;
        letter-spacing:1px;
}

#top_menu li {
    display:inline-block;
    list-style:none;
    padding:5px 15px 5px 0;
    font:bold 14px Tahoma, Geneva, sans-serif;
    position:relative;
    bottom:40px;
}