字間距不能在Safari瀏覽器工作

嗨我希望如果有人能幫我解決我在Safari中遇到的問題。基本上我創建了一個website 字間距不能在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>

這裏是該代碼的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; 
}

來源

2013-03-18 user1313161

喜，如果你不介意的話是什麼目的使用word-spacing:50px;如果這個想法是有之間的兩個<a>使用padding的空間在li和#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-18 07:31:24 jhunlio

你好的人，謝謝你爲你的答案，我決定放棄以前的導航欄，並在Photoshop中設計一個並導入到Dreamweaver中。不過謝謝Jhunlio，至少下次我知道要通過填充而不是使用字間距。 – user1313161 2013-03-19 13:23:59

以下是您需要字間距的示例：我們使用內嵌塊和文本對齊：對齊。我們仍然不想合併列表項目，我們希望至少有50px的間距。添加填充將打破理由。即使是最早的IE和Firefox也會支持字間距，但在這種情況下不支持Chrome和Safari。 – skobaljic 2013-09-19 11:26:17

-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-21 09:04:23 MSCFC

字間距不能在Safari瀏覽器工作

回答

相關問題