3

嗨，我希望有人可以帮助我解决我在 Safari 中遇到的问题。基本上我已经创建了一个网站

如果您查看导航栏的顶部菜单，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; 
}
4

2 回答 2

0

嗨，如果您不介意使用的目的是什么，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;
}

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

于 2013-03-18T07:31:24.957 回答
-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>

于 2017-10-21T09:04:23.363 回答