单词间距在 Safari 中不起作用答案

【问题标题】：word spacing not working in safari单词间距在 Safari 中不起作用
【发布时间】：2013-03-06 08:27:40
【问题描述】：

您好，我希望有人可以帮助我解决我在 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; 
}

【问题讨论】：

标签： html css browser xhtml safari

【解决方案1】：

只需像这样添加：

#top_menu {
     margin-left:170px;
     letter-spacing:1px;
     word-spacing:50px;
    -webkit-word-spacing:50px;
    -moz-letter-spacing:1
    -moz-word-spacing:50px;
    -webkit-letter-spacing:1
#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; 
  }

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

大家好，感谢您的回答，我决定放弃以前的导航栏，在 Photoshop 中设计一个并导入 Dreamweaver。不过，谢谢 Jhunlio，至少下次我知道要通过填充而不是使用字间距。
这是一个需要字间距的例子：我们使用 inline-blocks 和 text-align: justify。我们仍然不想合并列表项，我们需要至少 50px 的间距。添加填充会破坏合理性。即使是最老的 IE 和 Firefox 也会支持字间距，但 Chrome 和 Safari 在这种情况下不支持。