html - 字间距在 safari 中不起作用

Question

您好，我希望有人可以帮助我解决我在 Safari 中遇到的问题。基本上我创建了一个 website

如果您查看导航栏的顶部菜单，Google Chrome、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>

这是这段代码的 CSS:

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

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

#top_menu li a { 
    border-bottom: none; 
}

#top_menu a {
    color:#FFF;
    text-decoration: none; 
    border-bottom: 1px solid #7ac000; 
    padding-bottom: 2px; 
}

#top_menu a:hover { 
    color: #ff5400; 
    text-decoration: none; 
    border-bottom: 1px solid #ff5400; 
    padding-bottom: 2px; 
}

#top_menu a:active { 
    color: #ff5400; 
    text-decoration: none; 
    border-bottom: 1px solid #ff5400; 
    padding-bottom: 2px; 
    position: relative; top: 1px; 
}

Answer 1

嗨，如果你不介意使用 word-spacing:50px; 的目的是什么？如果想法是在两个 <a> 之间留出空间使用 padding给你的li并消除 word-spacing在#top_menu

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

我知道这不是完美的答案，但希望这可以帮助你....