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

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

Answer 2

只需添加如下：

＆＃13;

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

＆＃13;

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

＆＃13;

单词间距在safari中不起作用

2 个答案: